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

Subnav

This component provides secondary navigation within a specific section or page.

GitHubGitHub logocomponents/subnav
StorybookStorybook logocomponents/subnav
DesignUsageAccessibilityUpdates

Purpose

Navigate within a section

Subnavigation provides a secondary layer of navigation for a specific section — letting users move between closely related pages without using the main nav.

Shows what's available

All sub-sections are visible at once, so users know what's in the current section and can move freely between them.

Indicates the active page

The active indicator keeps users oriented within the sub-section — they know where they are without having to check the URL.

Anatomy

Applications Manage Overview History Settings
1

Container

2

Header (optional)

3

Navigation item

4

Action (optional)

Configuration

Default

The subnav provides secondary navigation within a specific section, with a header label, page links, and an optional action slot.

Applications Manage Overview History Settings

Renders a secondary navigation bar within a section. Use below the main navigation when a section has multiple sub-pages that users need to move between.

Playground

BETA
Applications Manage Overview History Settings

Structure

Applications Manage Overview History Settings

Component tokens

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

sgds/subnav
CategoryComponent tokenSemantic tokenValuePaddingpadding-2-xlsgds/padding/2-xl32pxpadding-lgsgds/padding/lg20pxpadding-mdsgds/padding/md16pxpadding-nonesgds/padding/none—padding-smsgds/padding/sm—Gapgap-lgsgds/gap/lg20pxgap-mdsgds/gap/md16pxgap-nonesgds/gap/none—gap-xlsgds/gap/xl—Borderborder-color-mutedsgds/border-color-muted#DFDFDFborder-width-0sgds/border-width/0—border-width-1sgds/border-width/11pxborder-width-2sgds/border-width/2—Typographyfont-size-14sgds/font-size/14—Colourcolor-defaultsgds/color-default#1A1A1Alink-color-defaultsgds/link-color-default#0269D0link-color-emphasissgds/link-color-emphasis#0151A0Sizeicon-size-mdsgds/icon-size/md—

Usage

When to use

  • Use subnav for secondary navigation inside a section that already has a primary navigation layer.
  • Use it when several related pages need a shared local navigation pattern.

When not to use

  • Do not use subnav when the section only has one destination.
  • Do not repeat the same links in multiple navigation components on the same page.

Best practices

Applications Manage Overview History Settings
Keep section navigation focused

A small set of clear local links helps users move around a section without losing context.

Accessibility considerations

Built-in accessibility

  • Sub-navigation supports expandable sections.
  • Expandable sub-navigation items support Enter and Space for opening and closing.

Labels and content

  • Use concise labels that describe the destination or section.
  • Keep nesting shallow so users can scan the navigation.

Focus and interaction

  • Users should be able to move through sub-navigation links in order.
  • Do not leave hidden links focusable when a section is collapsed.

Keyboard interaction

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

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for subnavPlannedTBD

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/subnav

Singapore Government Design System

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