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

Sidenav

The side navigation is used to display a list of links to move between pages within a related category.

GitHubGitHub logocomponents/sidenav
StorybookStorybook logocomponents/sidenav
DesignUsageAccessibilityUpdates

Purpose

Navigate a section in depth

Side navigation is designed for pages with many sub-sections — it keeps all the links in view so users can jump between them without hunting.

Always visible while reading

Unlike a header nav, a sidenav stays on screen as users scroll, so the navigation is always reachable without scrolling back to the top.

Highlights current location

The active state on the current page gives users a constant read of where they are within a section — useful on content-heavy sites.

Anatomy

Getting started Overview Installation Components Accordion Button
1

Navigation container

2

Section item

3

Link

Configuration

Default

The side navigation displays a vertical list of section links that stays visible as users scroll through content.

Getting started Overview Installation Components Accordion Button

Renders a vertical navigation panel with expandable sections and page links. Use for section-level navigation within documentation or multi-page services.

Playground

BETA
Getting started Overview Installation Components Accordion Button

Structure

Getting started Overview Installation Components Accordion Button

Component tokens

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

sgds/sidenav
CategoryComponent tokenSemantic tokenValuePaddingpadding-2-xssgds/padding/2-xs—padding-3-xlsgds/padding/3-xl—padding-smsgds/padding/sm—padding-xlsgds/padding/xl24pxGapgap-xssgds/gap/xs8pxBorderborder-radius-mdsgds/border-radius/md8pxTypographyfont-size-16sgds/font-size/1616pxfont-weight-regularsgds/font-weight/regular—font-weight-semiboldsgds/font-weight/semibold—line-height-24sgds/line-height/2424pxColourcolor-defaultsgds/color-default#1A1A1Alink-color-defaultsgds/link-color-default#0269D0link-color-emphasissgds/link-color-emphasis#0151A0bg-translucent-subtlesgds/bg-translucent-subtleoklch(from #0E0E0E l c h / 0.05)primary-bg-translucentsgds/primary/bg/translucent—primary-color-emphasissgds/primary/color/emphasis—primary-surface-translucentsgds/primary/surface/translucent—

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

Getting started Overview Installation Components Accordion Button
Keep destinations clear

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

Section Item Item
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

  • Side navigation provides structured navigation links and expandable sections.
  • Expandable side navigation items support keyboard opening and closing.

Labels and content

  • Use clear section labels and link text.
  • Keep the current page state accurate.

Focus and interaction

  • Users should be able to move through navigation links in order.
  • Do not hide focusable links inside collapsed sections.

Keyboard interaction

KeyInteractionTabMoves focus from the side navigation item to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused focused side navigation item.SpaceActivates the focused focused side navigation item.↓ Downor→ RightOpens the focused expandable side navigation item.↑ Upor← LeftCloses the focused expandable side navigation item.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for sidenavPlannedTBD

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

Singapore Government Design System

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