Sidebar
A composable, themeable and customizable sidebar component.
Features
- Responsive design - Sheet overlay on mobile, persistent sidebar on desktop
- Collapsible with icon-only mode
- Three variants: Sidebar (default), Floating, and Inset
- State persistence via cookies
- Keyboard shortcuts (Ctrl/Cmd + B to toggle)
- Automatic tooltips in collapsed state
- Flexible composition with menu groups, submenus, and actions
- Full shadcn/ui compatibility
Menu Collapse Mode
Controls how all sidebars on this page collapse.
Basic Sidebar
A simple sidebar with menu items.
Dashboard
With Navigation
Menu items that navigate to different pages using Href property.
Navigation Demo
This demo shows menu buttons that navigate using the Href property.
Key Features:
- Automatic NavLink rendering when Href is provided
- Active state detection based on current route
- Match parameter controls how URLs are matched (All or Prefix)
- No need to set AsChild - it's automatic!
With Menu Groups
Organize menu items into logical groups.
Projects
This example shows menu groups with separators.
With Submenus
Nested navigation with submenu items.
Team Portal
Click on Team or Projects to see submenu items.
Floating Variant
Sidebar with floating appearance and rounded corners.
Floating Sidebar
The floating variant adds visual separation with rounded corners.
Inset Variant
Sidebar with inset content area.
Collapsible to Icons
Sidebar that collapses to show only icons with tooltips.
Icon-Only Mode
Hover over icons to see tooltips. Click the trigger to expand.
Tree View
Hierarchical file/folder structure with nested items.
File Explorer
Tree view showing hierarchical file structure.
With Sticky Header
Site header above sidebar with coordinated layout.
Analytics Dashboard
Site header stays fixed above the sidebar.
With Header Dropdown
Version selector dropdown in sidebar header.
Sidebar header includes a version dropdown selector.
Collapsible Submenus
Expandable menu groups with chevron indicators.
Overview
Menu items with chevron icons indicate collapsible submenus.
3-Level Nested Menu
Deep nesting with collapsible submenus at level 2.
3-Level Nesting Demo
This example demonstrates 3-level menu nesting:
- Level 1: Projects (top-level collapsible)
- Level 2: Active Projects, Archived Projects, Project Settings
- Level 3: General Settings, Access Control, Notifications, Integrations (nested under Project Settings)
Keyboard Shortcuts
| Key | Action |
|---|---|
Ctrl + B / Cmd + B |
Toggle sidebar open/closed |
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| DefaultOpen | bool | true | On SidebarProvider: initial open state of the sidebar. |
| Variant | SidebarVariant | Sidebar | On SidebarProvider: visual variant. Options: Sidebar, Floating, Inset. |
| Side | SidebarSide | Left | On SidebarProvider: side to render. Options: Left, Right. |
| CookieKey | string | sidebar:state | On SidebarProvider: cookie key for state persistence. |
| HeightClass | string? | null | On SidebarProvider: CSS height class (e.g. h-full for contained demos). |
| Collapsible | bool | true | On Sidebar: when true, collapses to icon-only mode; when false, hides completely. |
| Tooltip | string? | null | On SidebarMenuButton: tooltip shown when sidebar is collapsed. |
| IsActive | bool | false | On SidebarMenuButton: marks the item as the active/current page. |
| Href | string? | null | On SidebarMenuButton: renders as NavLink with the given href. |
| Match | NavLinkMatch | Prefix | On SidebarMenuButton: controls how the href is matched for active state. |
When to Use
Use When
- Building multi-page applications with persistent navigation
- Creating dashboard layouts
- Need responsive navigation (mobile + desktop)
- Want collapsible sidebar for more screen space
- Building admin panels or SaaS applications
Avoid When
- Building single-page marketing sites
- Simple websites with top navigation
- Mobile-first apps where drawer is preferred
- Very minimal UI requirements