Get startedFoundationsComponentsTemplatesBlocksAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.
Browse Components

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Mainnav

This component is the primary means that your users will use to navigate through your portal.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Show main sections

Mainnav gives users access to the top-level areas of a service.

Anchor the service brand

Use the brand slot so users know which service they are using.

Work across screen sizes

The navigation adapts from desktop layouts to smaller screens.

Anatomy

Slot content
Services Resources Contact Log in
1

Slot content

2

Nav menus

3

Container

4

Primary action

Configuration

Container width

Toggle the fluid prop to remove the max-width constraint and stretch the navbar across the viewport.

Slot content
Home About Services Contact

Default behaviour. Content is bounded by the standard SGDS container max-width.

Item states

Mark the current page with active and use disabled to indicate items that are unavailable.

Slot content
Home About Contact

Highlights the current page so users know where they are in the site.

Dropdown menu

Use sgds-mainnav-dropdown to group related destinations under a single navigation item.

Slot content
Home About Contact

Flat list of items, best when there are five or fewer destinations.

End slot content

Use the end slot to anchor sign-in buttons or other actions to the right end of the navbar.

Slot content
Home About

Use when the navbar carries only navigation links.

Non-collapsible slot

The non-collapsible slot keeps critical actions visible even when navigation items collapse.

Slot content
Home About Contact Log in

Use for actions that must stay visible across responsive states.

Structure

Slot content
Overview Services Apply Contact
Slot content

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedPaddingsgds-mainnav-padding-x—Space between the left and right edges of the component and its contentsgds-mainnav-mobile-padding-x—Mobile horizontal padding of the mainnav containersgds-padding-md16pxSpace between the top and bottom edges of the component and its contentsgds-padding-sm—Padding of the nav link; padding of the linkGapsgds-gap-xl—Spacing between items of the navbarsgds-gap-xs8pxSpacing between items of the nav link; spacing between items of the linkBordersgds-border-width-11pxThickness of the bottom border stroke of the mainnav componentsgds-border-width-4Width variesThickness of the active nav link purple strokeSizesgds-spacer-4—Spacing between items inside the componentsgds-icon-size-sm—Size of the mainnav disclosure iconsgds-mainnav-max-widthWidth variesMaximum width of the mainnav containerOutlinesgds-outline-focus—Focus outline of the nav link when keyboard-focused; focus outline of the link when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the nav link when keyboard-focused; focus-outline offset of the link when keyboard-focusedLayersgds-z-index-floating—Stacking layer of the nav; stacking layer of the navbar body

Usage

When to use

  • Use this component to help users understand where they are and move confidently to the next place.
  • Use it when the navigation pattern matches the scale of the journey and the relationship between destinations.

When not to use

  • Do not use this component when the page does not need another layer of navigation.
  • Do not add vague, repetitive, or competing labels that make the path harder to understand.

Best practices

Slot content
Home Services About Contact
Use mainnav for top-level destinations

Reserve mainnav for primary sections every user needs. Keep secondary or task-specific links elsewhere.

Slot content
Home Apply Renew Track News Resources Help Contact About
Do not overload the mainnav with every link

Long mainnavs are hard to scan. With more than five items, consolidate or move some into a dropdown or subnav.

Slot content
Home About Sign in
Reserve the end slot for account and sign-in actions

Anchor user-account actions like sign in to the end slot so users find them in a consistent place.

Slot content
Home
New Get started Sign in
Do not use the end slot for unrelated marketing content

The end slot draws strong attention. Reserve it for one global action, not promotional links or badges.

Accessibility considerations

Built-in accessibility

  • Main navigation renders a navigation landmark and a responsive menu toggle.
  • The mobile toggle exposes expanded state and the controlled menu.

Labels and content

  • Use clear labels for top-level navigation items.
  • Keep primary navigation stable across pages.

Focus and interaction

  • Users should be able to reach the brand link, navigation items, and mobile toggle in order.
  • Do not add hidden navigation items that remain focusable.

Keyboard interaction

KeyInteractionTabMoves focus from the navigation toggle or item to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused navigation toggle or item.SpaceActivates the focused navigation toggle or item.

Updates

DateVersionDescription29 Apr 2026v3.18.0Alignment in #617.06 Mar 2026v3.13.1Display issue in safari in #562.18 Dec 2025v3.6.0Update correct breakpoints for dropdown menu, mainnav and masthead @th-94 in #472.06 Oct 2025v3.5.0Position and mobile transitions in #405.22 Sept 2025v3.4.0Close menu on mobile when link is clicked in #374.

Roadmap

Planned itemStatusTargetFuture enhancements for mainnavPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/mainnav

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2