Get startedFoundationsComponentsTemplatesBlocksAIStories
Browse Components

Components

AccordionAlertAppnavBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxData tableDatepickerDescription 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

Upper slot
Lower slot
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.

Upper slot
Lower slot

Application content

Your application content appears here.

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

Collapsed

Compare expanded and icon-only states. Below 768px, collapsible sidebars use overlay mode, where collapsing hides the panel instead of showing a rail.

Upper slot
Lower slot

Use expanded sidebars when labels should stay visible.

Active item

Set the sidebar active value to an item’s name to highlight the current page or section.

Upper slot
Lower slot

Use active to orient users in the current navigation.

Scrim

Scrim dims the content behind an open overlay sidebar or drawer. Below 512px, the component hides the scrim and uses a full-width sidebar.

Application content

The sidebar opens over this content.

Upper slot
Lower slot

The scrim dims the content behind the open sidebar. It is hidden below 512px.

Upper and lower slots

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

Singapore Government Design System
Help and support

Use the upper slot for branding and the lower slot for supporting actions, such as help and support.

Structure

Upper slot
Lower slot

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 of the expanded sidebar at desktop sizessgds-dimension-7272pxWidth of the collapsed icon-only railPaddingsgds-padding-lg20pxTop and bottom padding of the main sidebarsgds-padding-xs8pxPadding around navigation items, section content and the sidebar headerGapsgds-gap-md16pxGap between navigation sections and between header elementssgds-gap-xs8pxGap between item icons, labels and indicatorsBordersgds-border-radius-md8pxCorner radius of navigation items and section labelssgds-dimension-22pxWidth of the sidebar scrollbarsgds-border-radius-xs—Corner radius of the sidebar scrollbar thumbsgds-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 sidebar and nested panel from 512px to 767pxGapsgds-gap-2-xs4pxGap between section label elements and item indicatorsSizesgds-icon-size-sm—Size of the sidebar expand and collapse iconsTypographysgds-line-height-20Height variesFallback line height used to limit item labels to two linesMarginsgds-margin-2-xl—Left offset of nested item labelssgds-margin-md—Bottom margin of section separatorsMotionsgds-motion-duration-slow—Duration of section expand and collapse transitionsPaddingsgds-padding-md16pxTop and bottom padding of the nested sidebar panelsgds-padding-sm—Horizontal padding of section labelsOutlinesgds-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-standard300msDuration of sidebar width, overlay and submenu transitionssgds-motion-easing-standardcubic-bezier(0.25, 0, 0.25, 1)Easing of sidebar, overlay, section and submenu transitionsSizesgds-dimension-4040pxWidth of collapsed navigation itemssgds-icon-size-md20pxSize of the navigation icons supplied in these demosTypographysgds-font-size-label-sm14pxFont size of navigation item labelssgds-font-size-label-xs12pxFont size of section labelssgds-line-height-2-xs20pxLine height of item and section labelsPaddingsgds-padding-2-xs4pxHorizontal padding inside item label wrapperssgds-padding-3-xs2pxVertical padding inside item label wrappersMarginsgds-margin-lg20pxSpace above the navigation content and lower slot

Usage

When to use

  • Use sidebar for applications such as dashboards and admin tools, where users regularly move between product areas.
  • Use it when navigation needs sections, nested groups or an icon-only collapsed state.

When not to use

  • For top-level navigation on content-focused websites, use Mainnav instead.
  • For links to related pages within a website section, use Sidenav instead.
  • For navigation between sections on the same page, use Table of contents instead.

Best practices

Upper slot
Lower slot
Group related destinations

Use clear section headings to separate areas such as everyday work and administration.

Upper slot
Lower slot
Do not mix unrelated destinations

Place destinations under headings that match their purpose, so users know where to find them.

Accessibility considerations

Built-in accessibility

  • Sidebar renders a navigation landmark, labelled Sidebar navigation by default.
  • Items and groups use button semantics, with accessible names from their title or name.
  • Nested submenus and section headers expose their expanded state. Top-level groups do not announce drawer state correctly.
  • The built-in collapse toggle is labelled Expand sidebar or Collapse sidebar.

Labels and content

  • Use ariaLabel to distinguish the sidebar from other navigation regions.
  • Give items a clear title and unique name. Keep the active value aligned with the current page; the component does not set aria-current or aria-selected on item controls.
  • Use meaningful icons for top-level items in the collapsed rail, and retain their titles as accessible names.
  • Provide accessible names for custom slot controls and external toggles.

Focus and interaction

  • Keep custom slot controls and external toggles keyboard accessible.
  • Collapsible section headers enter the tab order when the sidebar is expanded.
  • Check focus when closing drawers, sections or overlay sidebars. Closed content can remain in the tab order, and there is no modal focus trap.

Keyboard interaction

KeyInteractionTabMoves focus to the next available control.Shift+TabMoves focus to the previous available control.EnterorSpaceActivates an item, toggles a group or toggles a collapsible section.→ RightOn a top-level group, opens its drawer. If its drawer is already open, moves focus to the first drawer item.← LeftOn the active top-level group, closes its open drawer. From a drawer item, returns focus to that top-level group.

Updates

DateVersionDescription17 Sept 2026v3.28.0Support collapsed state with no icon slotted into sidebar group or items in #830.05 Aug 2026v3.26.0Keyboard interaction in #783.05 Aug 2026v3.26.0Icon button size in #780.05 Aug 2026v3.26.0Sidebar select event not emitting for react component in #796.21 Jul 2026v3.25.0Fix/update sidebar in #774.

Roadmap

Planned itemStatusTargetNo confirmed roadmap items documented——

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

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