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

Mainnav

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

GitHubGitHub logocomponents/mainnav
StorybookStorybook logocomponents/mainnav
DesignUsageAccessibilityUpdates

Purpose

Primary site navigation

The mainnav is the top-level wayfinding component — it gives users a clear view of the site's main sections from any page.

Includes brand identity

The logo slot ties navigation to the service brand, so users always know which product they're in, even when they navigate deep into the site.

Responsive and accessible

The navigation collapses into a mobile-friendly menu at smaller breakpoints, and keyboard navigation is fully supported out of the box.

Anatomy

SGDS Overview Services Account Profile Sign out
1

Container

2

Brand (slot)

3

Navigation item

4

End content (optional)

Configuration

Default

The main navigation provides top-level wayfinding with a brand logo, nav items, and an end slot for utility controls.

SGDS Overview Services Account Profile Sign out

Renders the top-level navigation bar with brand, nav items, and an end slot for utility controls. Use on every page of a service to give users consistent wayfinding.

Playground

BETA
SGDS Overview Services Account Profile Sign out

Structure

SGDS Overview Services Account Profile Sign out

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: padding-md under sgds/mainnav means sgds/mainnav/padding-md.

sgds/mainnav
CategoryComponent tokenSemantic tokenValuePaddingpadding-mdsgds/padding/md16pxpadding-smsgds/padding/sm—Gapgap-xlsgds/gap/xl—gap-xssgds/gap/xs8pxBorderborder-color-translucentsgds/border-color-translucent—border-width-1sgds/border-width/11pxborder-width-4sgds/border-width/4—Colourcolor-defaultsgds/color-default#1A1A1Alink-color-defaultsgds/link-color-default#0269D0link-color-emphasissgds/link-color-emphasis#0151A0surface-defaultsgds/surface-default#FFFFFFbg-translucent-subtlesgds/bg-translucent-subtleoklch(from #0E0E0E l c h / 0.05)primary-border-color-defaultsgds/primary/border-color/default—primary-color-defaultsgds/primary/color/default—Opacityopacity-50sgds/opacity/50—

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

SGDS Overview Services Account Profile Sign out
Keep destinations clear

Short, specific labels and a clear current state help users move through the interface with confidence.

SGDS Overview Services Account Profile Sign out
SGDS Overview Services Account Profile Sign out
Do not compete with the page structure

Repeated or unnecessary navigation patterns make it harder to understand where to go next.

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

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for mainnavPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

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.