Layout · §5.21

Sidebar

The staff console's navigation.

Theme
Contrast
Language
Motion
Text size

Code

<SidebarProvider><Sidebar>…</Sidebar></SidebarProvider>

Accessibility

  • A nav landmark; the active item is marked; counts are announced.

Usage

Do

  • Icon plus label; a 2 px primary bar on the active item.

Don't

  • Never more than one level of nesting.

Platforms

Web
apps/web/components/ui/sidebar.tsx, apps/web/components/ui/separator.tsx, apps/web/components/ui/sheet.tsx, apps/web/components/ui/input.tsx, apps/web/components/ui/skeleton.tsx, apps/web/components/ui/tooltip.tsx
iOS
SwiftUI NavigationSplitView
Android
Compose NavigationRail