Sidebar
Application sidebar layout and navigation primitives.
stable
Quick Preview
Set collapsible="icon" and toggle with SidebarTrigger (or ⌘/Ctrl + B) to
collapse the sidebar to an icon rail. Wrap each menu label in a <span> so it
fades out and the icon stays centered while the rail animates.
Composition
Use this public composition when building Sidebar:
SidebarProvider
├── Sidebar
│ ├── SidebarHeader
│ ├── SidebarContent
│ └── SidebarFooter
└── SidebarInsetUsage
<SidebarProvider><Sidebar><SidebarContent /></Sidebar></SidebarProvider>Examples
Collapsible Sidebar
Use this as the starting point for Sidebar. Keep product data, routing, fetching, and authorization logic in the consuming app.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | true | Initial sidebar state. |
variant | `"sidebar" | "floating" | "inset"` |
collapsible | `"offcanvas" | "icon" | "none"` |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented Sidebar composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.