Sidebar
A complex sidebar navigation component with collapsible sections, menus, and responsive behavior.
Usage
Complex Example
A full sidebar with collapsible project groups, nested sub-menus (SidebarMenuSub), badge counts (SidebarMenuBadge), header, footer, and a toggle trigger. Uses Collapsible to expand/collapse groups with a chevron indicator.
Composable
useSidebar() — returns { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'left' | 'right' | 'left' | Which side the sidebar appears on. |
variant | 'sidebar' | 'floating' | 'inset' | 'sidebar' | The visual style variant. |
collapsible | 'offcanvas' | 'icon' | 'none' | 'offcanvas' | How the sidebar collapses. |
Sub-components
SidebarProvider
Root state provider that manages open/closed state.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | - | Initial open state. |
open | boolean | - | Controlled open state. Use with v-model. |
SidebarContent
Scrollable content area.
SidebarHeader
Top section of the sidebar.
SidebarFooter
Bottom section of the sidebar.
SidebarGroup
Groups related menu items.
SidebarGroupLabel
Label heading for a group.
SidebarGroupContent
Content container within a group.
SidebarGroupAction
Action button in a group header.
SidebarMenu
Menu container for menu items.
SidebarMenuItem
Wrapper for a single menu entry.
SidebarMenuButton
Clickable menu button with icon and text.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'outline' | 'default' | Visual style variant. |
size | 'default' | 'sm' | 'lg' | 'default' | Button size. |
isActive | boolean | - | Active state styling. |
tooltip | string | Component | - | Tooltip text shown on hover (useful in collapsed icon mode). |
SidebarMenuSub
Nested sub-menu container.
SidebarMenuSubItem
Item within a sub-menu.
SidebarMenuSubButton
Button within a sub-menu.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'md' | Button size. |
isActive | boolean | - | Active state styling. |
SidebarMenuAction
Action button within a menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
showOnHover | boolean | - | Only show when parent menu item is hovered. |
SidebarMenuBadge
Badge indicator for counts or status.
SidebarMenuSkeleton
Loading skeleton for menu items.
SidebarTrigger
Button that toggles the sidebar open/closed.
SidebarRail
Slim rail visible when sidebar is collapsed.
SidebarInset
Main content area positioned next to the sidebar.
SidebarInput
Search input styled for the sidebar.
SidebarSeparator
Visual separator between groups.