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