Design system

Sidebar

Organize persistent navigation beside the current workspace content.

Use a sidebar for top-level workspace navigation that stays available while content changes. Keep the navigation grouped, give the active item a clear state, and make the content area the primary reading surface.

Built on Workshop1 compositionUpstream API
Workshop One
Workspace

Current view

Overview

The bounded shell keeps the navigation example inside the page flow.

Preview boundaries

This documentation preview uses collapsible="none" inside a bounded shell. Product layouts can use the responsive off-canvas or icon modes, but a catalog example should stay in the page flow and never take over the documentation viewport.

Usage

<SidebarProvider>
  <Sidebar>
    <SidebarContent>...</SidebarContent>
  </Sidebar>
  <SidebarInset>{children}</SidebarInset>
</SidebarProvider>

Accessibility

Use descriptive menu labels and expose the current destination with isActive. When the sidebar is collapsible, keep an accessible trigger and confirm labels remain available as tooltips in icon mode.

Best practices

  • Group stable destinations by user task and keep the active item visible.
  • Use one provider for the sidebar and its inset content.
  • Choose offcanvas for narrow screens and icon only when every destination has a clear icon.