BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

SidebarNav

Stable
Edit in Studio

The app's side navigation: sections of links to the main areas of Bridge, with the current page marked by a signal mark and an ink label.

Updated Oct 16, 2026

Rendered with the real component
Light
Dark

When to use

Use it for

  • Primary navigation of an app with more than five areas, in a left rail that stays visible.
  • Group items into titled sections by task (Library, Governance, Workspace).
  • collapsible on sections users rarely need, so the rail stays short.
  • count for items that need attention, like reviews waiting for you.

Not for

  • Switching views inside one page: use Tabs.
  • Fewer than five destinations: a top bar is enough.
  • Actions (Create token, Sync from Figma): put them in the page header as Buttons, not in the navigation.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Do

Mark exactly one current page

active on the item for the current URL, including when the user is on a child page of it.

Don't

Icons on some items only

A ragged column of icons breaks the scan line. Use icons on every item of a section or none.

Accessibility

  • A nav landmark: give it an aria-label when the page has other navigation (Breadcrumb, Pagination).
  • Each section is a list labelled by its title.
  • The current item has aria-current="page". It also gets a 2px signal mark and ink text, so color is not the only cue.
  • Collapsible section titles are buttons with aria-expanded (Base UI Collapsible); Enter and Space toggle them.
  • Items are full-width targets at the menu item height (36px comfortable, 30px compact).

Anatomy and tokens

Read from packages/react/src/components/SidebarNav/SidebarNav.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

31 tokens 14 semantic or component, change with theme and brand 1 density, change with comfortable or compact 16 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/SidebarNav/SidebarNav.tsx, so this table cannot drift from the code.

Prop Type Default Description
children ReactNode none No description in the code yet.

Playground

SidebarNav has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.

Light
Dark

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open SidebarNav in Storybook) .

Embed Storybook stories here (2)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

AllStates

Changelog

  • New

    Navigation: Tabs (underline with a sliding signal indicator, contained, icons, counts, vertical), Breadcrumb (aria-current, collapsing middle levels), Pagination (full and compact, getPageItems helper) and SidebarNav (sections, collapsible groups, counts, current page mark).

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes