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

Subnav

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

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Move within a section

Use subnav for closely related pages under the same main area.

Show related pages

Visible links help users understand what the section contains.

Mark the active page

The active state keeps users oriented within the section.

Anatomy

Header
Register Exhibit Overview On-site Activities Programme Speakers
1

Header (optional)

2

Sub nav menu

3

Call to action (optional)

4

Container

Configuration

Item active state

Mark the current sub-section with active so users can orient themselves within the page.

Project Apollo Overview Tasks Members

Highlights the current sub-page so users always know which view they are on.

Header content

Use the header slot to label the section the subnav belongs to.

Project Apollo Overview Tasks Members

Recommended for record-level subnavs so the entity is always visible while users navigate tabs.

Contextual actions

Use the actions slot to surface buttons or controls scoped to the current section.

Project Apollo Overview Tasks
Share New task

Pin section-specific actions like Share or New task next to the navigation tabs.

Disabled item

Subnav items can be disabled when a section is visible but unavailable.

Overview Details

Use default items for available sections.

Structure

Header
Manage Overview History Settings

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-padding-lg20pxSpace between the left and right edges of the component and its contentsgds-padding-sm—Space between the top and bottom edges of the component and its contentsgds-padding-2-xl32pxPadding of the header container; padding of the subnav actionssgds-padding-md16pxPadding of the header container; padding of the subnav actionssgds-padding-none—Padding of the content; top padding of the contentGapsgds-gap-lg20pxSpacing between items of the subnav navsgds-gap-md16pxSpacing between items of the header container; spacing between items of the subnav actionssgds-gap-none—Spacing between items of the subnav; spacing between items of the subnav nav groupsgds-gap-xl—Spacing between items of the subnav; spacing between items of the subnav nav groupMarginsgds-margin-none—Value of the contentBordersgds-border-width-0Width variesBorder reset for inactive subnav contentsgds-border-width-11pxBottom border of the nav; bottom border of the subnavsgds-border-width-2Width variesBottom border of the content when active; bottom border of the contentTypographysgds-font-size-14—Font size of the contentMarginsgds-margin-xs—Spacing around subnav item contentSizesgds-icon-size-lg—Size of the mobile subnav toggler iconsgds-icon-size-md—Height of the content; width of the contentOutlinesgds-outline-focus—Focus outline of the content when keyboard-focused; focus outline of the subnav toggler when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the content when keyboard-focused; focus-outline offset of the subnav toggler when keyboard-focusedLayersgds-z-index-sticky—Stacking layer of items inside the component

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

Project Apollo Overview Tasks Members Settings
Use subnav for record-level or section-scoped tabs

Subnav suits pages where one entity has several views, such as overview, tasks, and members. Keep cross-service nav in mainnav.

Home Services About Contact
Do not duplicate the mainnav inside a subnav

Subnav is for moving within a section. Repeating top-level destinations dilutes the primary navigation.

Project Apollo Tasks Members
Share New task
Use the actions slot for section-scoped controls only

Place buttons that act on the current section here. Avoid global controls unrelated to the sub-page.

Project Apollo Tasks Members Open Closed Drafts
Do not stack multiple subnavs on the same page

Each page should have at most one subnav. Stacking two creates competing wayfinding and confuses users.

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

DateVersionDescription29 Apr 2026v3.18.0Activate z-index and lockBodyScroll when menu is open in #613.18 Dec 2025v3.6.0Hide the container of actions slot when the slot is empty in #491.22 Sept 2025v3.4.0Reduce z-index to avoid clashes with mainnav in #375.22 Sept 2025v3.4.0Apply transparent border at bottom to prevent content shift during navigation in #395.29 Aug 2025v3.3.0Styling update for background color in #303.

Roadmap

Planned itemStatusTargetFuture enhancements for subnavPlannedTBD

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

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