Sidebar
A composable sidebar component with collapsible navigation, nested menus, and multiple variants.
Default Sidebar
A complete sidebar layout with header, navigation groups, collapsible submenus, and user footer. Click the toggle button to collapse to icon-only mode.
Floating Sidebar
The floating variant adds a subtle shadow and rounded corners for a card-like appearance.
Inset Sidebar
The inset variant creates a content area that appears elevated from the sidebar.
Icon-only Sidebar
Start collapsed with icon-only mode. Hover over icons to see tooltips. Click the trigger to expand.
Key Features
Collapsible
Toggle between expanded and collapsed states smoothly
Badge Support
Show notification counts and status indicators
Nested Menus
Create hierarchical navigation with sub-menus
Keyboard Navigation
Toggle sidebar with keyboard shortcuts
Mobile Responsive
Automatically adapts to mobile viewports
Customizable
Easy to theme with multiple variants
Usage Notes
The Sidebar component must be wrapped in a SidebarProvider to manage state.
Use SidebarTrigger to create a button that toggles the sidebar.
The sidebar supports three variants: sidebar (default), floating, and inset.
Press Ctrl+B or Cmd+B to toggle the sidebar when using the real component.