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

Sidenav

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

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Navigate within a section

Use sidenav for related pages or subsections in the same area.

Keep section links nearby

Side placement keeps local navigation close to the page content.

Show current location

The active state helps users see where they are in the section.

Anatomy

Reports Monthly summary Annual report
1

Leading icon (optional)

2

Label

3

Submenu indicator

Configuration

Item type

Sidenav items render as a single link or as a collapsible menu depending on the children passed to the default slot.

Reports Monthly summary Annual report Settings Profile Notifications

Group related links under expandable parent items. Up to three levels are supported.

Active and expanded states

Set active on a parent menu item to expand it on first load and highlight the current child link.

Reports Monthly summary Annual report Settings Profile

The parent expands automatically and the matching child is highlighted as the current page.

Disabled link

Disable individual sidenav links to indicate sections that are not yet available to the user.

Reports Monthly summary Annual report

Standard menu where every link is interactive.

Sticky

Sticky sidenav stays visible while the user scrolls through related page content.

Overview Details

Use default when the sidenav scrolls with content.

Icon slot

Sidenav links can include an icon to support recognition in dense navigation.

Overview

Use icons when they help users scan repeated navigation items.

Caret icon

Nested sidenav items can customise the caret icon used for expansion.

Section Overview

Use the default caret for standard nested navigation.

Structure

Getting started Overview Installation Components Accordion Button

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-sm—Space 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-xs—Padding of the sidenav button; padding of the contentsgds-padding-3-xl—Left padding of the sidenav button; left padding of the contentsgds-padding-xl24pxLeft padding of the contentGapsgds-gap-xs8pxSpacing between items of the sidenav button; spacing between items of the contentBordersgds-border-radius-md8pxCorner radius of the sidenav button; corner radius of the contentTypographysgds-font-size-1616pxFont size of the sidenav button; font size of the contentsgds-font-weight-regular—Font weight of the sidenav buttonsgds-font-weight-semibold—Font weight of the sidenav button; font weight of the contentsgds-line-height-2424pxLine height of the sidenav button; line height of the contentSizesgds-icon-size-lg—Size of sidenav expand and collapse iconsOutlinesgds-outline-focus—Focus outline of the sidenav button when keyboard-focused; focus outline of the content when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the sidenav button when keyboard-focused; focus-outline offset of the content when keyboard-focused

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

Account Profile Notifications Privacy Billing Plans Invoices
Use sidenav for navigating within a section

Sidenav suits content-heavy sections like documentation or settings where users need every link in view.

Home Services About Contact
Do not use sidenav as the only top-level navigation

Sidenav is for moving within a section. Place the global mainnav above it so users can still cross sections.

Reports Monthly January February
Do not nest more levels than needed

Deeply nested sidenavs are hard to operate. Restrict nesting to one level and split larger structures.

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

DateVersionDescription

Roadmap

Planned itemStatusTargetFuture enhancements for sidenavPlannedTBD

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

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