Sidebar
Navigation
Layout
Responsive
A composable sidebar component with collapsible states, groups, menus, and mobile support. Perfect for dashboard navigation.
Basic Sidebar
A standard sidebar with header, content groups, and footer
Icon-Only Collapse
Sidebar that collapses to show only icons with tooltips
Usage
How to implement the Sidebar component
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuBadge, SidebarProvider, SidebarTrigger,} from '@/components/ui/sidebar'
// Basic sidebar layout<SidebarProvider> <Sidebar> <SidebarHeader> {/* Logo / Brand */} </SidebarHeader> <SidebarContent> <SidebarGroup> <SidebarGroupLabel>Navigation</SidebarGroupLabel> <SidebarGroupContent> <SidebarMenu> <SidebarMenuItem> <SidebarMenuButton isActive> <Home className="h-4 w-4" /> <span>Home</span> </SidebarMenuButton> </SidebarMenuItem> <SidebarMenuItem> <SidebarMenuButton> <Inbox className="h-4 w-4" /> <span>Inbox</span> <SidebarMenuBadge>5</SidebarMenuBadge> </SidebarMenuButton> </SidebarMenuItem> </SidebarMenu> </SidebarGroupContent> </SidebarGroup> </SidebarContent> <SidebarFooter> {/* User info / Actions */} </SidebarFooter> </Sidebar> <main> <SidebarTrigger /> {/* Page content */} </main></SidebarProvider>
// Icon-only collapsible sidebar<SidebarProvider defaultOpen={true}> <Sidebar collapsible="icon"> <SidebarMenuItem> <SidebarMenuButton tooltip="Dashboard"> <LayoutDashboard className="h-4 w-4" /> <span>Dashboard</span> </SidebarMenuButton> </SidebarMenuItem> </Sidebar></SidebarProvider>Component Props
API reference for Sidebar components
| Prop | Type | Default | Description |
|---|---|---|---|
SidebarProvider | { defaultOpen?, open?, onOpenChange? } | — | Context provider for sidebar state |
Sidebar | { side?, variant?, collapsible? } | — | Main sidebar container |
collapsible | "offcanvas" | "icon" | "none" | "offcanvas" | How sidebar collapses |
side | "left" | "right" | "left" | Which side of the screen |
SidebarContent | React.HTMLAttributes | — | Scrollable content area |
SidebarGroup | React.HTMLAttributes | — | Group container for menu items |
SidebarGroupLabel | React.HTMLAttributes | — | Label for a group |
SidebarMenu | React.HTMLAttributes | — | Menu list container |
SidebarMenuButton | { isActive?, tooltip?, variant?, size? } | — | Clickable menu item |
SidebarMenuBadge | React.HTMLAttributes | — | Badge for notifications/counts |
SidebarTrigger | ButtonProps | — | Toggle button for sidebar |
useSidebar | hook | — | Access sidebar state programmatically |
Features
Sidebar component capabilities
- Collapsible modes: Off-canvas, icon-only, or fixed
- Groups & labels: Organize navigation into sections
- Menu badges: Show counts or status indicators
- Tooltip support: Show tooltips when collapsed to icons
- Mobile responsive: Converts to sheet on mobile devices
- Keyboard shortcuts: Toggle with Ctrl+B
- Nested menus: Sub-menus for hierarchical navigation
- Dark mode: Full dark mode support
- Left or right: Position on either side