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

Sidebar

Collapsible vertical navigation for application layouts.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Keep app navigation visible

Use a sidebar for product areas that users move between often.

Organise many destinations

Sections and groups keep complex navigation easier to scan.

Collapse for more workspace

Use the collapsed state when dense pages need more horizontal room.

Anatomy

Slot content
Slot content
1

Level 1 sidebar

2

Collapsible icon

3

Level 2 sidebar (optional)

4

Scrim (optional)

5

Slot content (optional)

6

Side bar menus

7

Slot content (optional)

Configuration

Variant

Choose a sidebar variant based on how much space the layout can reserve for navigation.

Use when users can expand or collapse the sidebar while staying in the same workspace.

Collapsed

Sidebar can collapse to a narrower state when space is limited.

Service portal

Use expanded sidebars when labels should stay visible.

Active item

Use active sidebar items to show the current page or section.

Use active to orient users in the current navigation.

Scrim

Scrim adds an overlay treatment for temporary sidebar states on smaller screens.

Use no scrim for persistent sidebars.

Upper and lower slots

Sidebar supports upper and lower slots for fixed content around the navigation list.

Portal
Help

Use slots for persistent header or footer content connected to the sidebar.

Structure

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 usedSizesgds-dimension-288288pxWidth or height of an element insidesgds-dimension-7272pxWidth or height of an element insidePaddingsgds-padding-lg20pxValue used by the componentsgds-padding-xs8pxValue used by the componentGapsgds-gap-md16pxValue used by the componentsgds-gap-xs8pxValue used by the componentBordersgds-border-radius-md8pxCorner radius of bordered elementssgds-dimension-22pxBorder style of the componentsgds-border-radius-xs—Corner radius of the active indicatorsgds-border-width-11pxBorder of the sidebar container and nested overlaySizesgds-dimension-0—Collapsed inset and reset size values used inside the componentsgds-dimension-256256pxWidth of the nested sidebar overlayTypographysgds-font-size-0—Font-size reset used while the sidebar is collapsedsgds-font-size-1—Font-size reset used for collapsed labelsGapsgds-gap-2-xs4pxCompact gap between sidebar icon and text contentSizesgds-icon-size-sm—Size of the sidebar expand and collapse iconsTypographysgds-line-height-20Height variesLine height of sidebar item labelsMarginsgds-margin-2-xl—Offset used by nested sidebar contentsgds-margin-md—Offset used by sidebar section and item contentMotionsgds-motion-duration-slow—Duration of sidebar collapse and overlay transitionsPaddingsgds-padding-md16pxPadding inside nested sidebar overlaysgds-padding-sm—Padding inside sidebar item content and controlsOutlinesgds-outline-focus—Focus outline of sidebar controlssgds-outline-offset-focus—Focus outline offset of sidebar controlsLayersgds-z-index-sticky200Stacking order over other elements on the pageMotionsgds-motion-duration-standard200msValue used by the componentsgds-motion-easing-standardcubic-bezier(0.42, 0, 0.58, 1)Value used by the component

Usage

Use for application navigation

  • Use sidebar for dashboards, admin tools, and internal products where users switch between major areas often.
  • Pair sidebar with application layouts that reserve a left navigation rail.

Keep active state accurate

  • Set active on the sidebar to match the current item name.
  • Give every item and group a unique name so active tracking works reliably.

Do not use for simple site navigation

  • Use mainnav or subnav for public-facing pages with shallow navigation.
  • Use table of contents for navigation within a single page.

Best practices

Group related destinations

Use sections and groups to make complex application navigation easier to scan.

Do not omit item names

Sidebar uses name values to resolve active state. Missing or duplicated names make current-page highlights unreliable.

Accessibility considerations

Built-in accessibility

  • Use the SGDS component instead of recreating the same pattern with custom markup.
  • Keep component states such as disabled, invalid, active, or expanded in sync with the user interface.

Labels and content

  • Use clear labels, headings, and supporting text.
  • Do not rely on colour, position, or icon shape as the only way to communicate meaning.

Focus and interaction

  • Keep interactive content reachable in the normal tab order.
  • Do not add custom keyboard handling unless the SGDS component does not already support the interaction.

Keyboard interaction

KeyInteractionTabMoves focus to the next sidebar item or control.Shift+TabMoves focus to the previous sidebar item or control.EnterActivates the focused sidebar item or opens an expandable group.SpaceActivates the focused sidebar item or opens an expandable group.↓ DownMoves focus to the next sidebar item, or to the first child item when an expanded group is focused.↑ UpMoves focus to the previous sidebar item, or to the last child of the previous group.→ RightOpens the focused expandable group, or moves focus into its first child when already open.← LeftCloses the focused expandable group, or returns focus to the parent group from a nested item.

Updates

DateVersionDescription29 Apr 2026v3.18.0Sidebar and sidenav to be on new z index sticky layer in #612.17 Apr 2026v3.17.0New sidebar component in #570.

Roadmap

Planned itemStatusTargetFuture enhancements for sidebarPlannedTBD

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

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