Sidebar
A composable application sidebar with header, grouped menu, and footer.
API reference
A composable application sidebar. SidebarProvider supplies collapse state; Sidebar holds a header, a scrollable body of grouped menus, and a footer, alongside a SidebarInset for the main area.
Anatomy
Sidebar | The sidebar container; collapsible offcanvas, icon, or none. |
SidebarContent | Scrollable body holding the navigation groups. |
SidebarFooter | Bottom region, e.g. settings or the account menu. |
SidebarGroup | A titled section of menu items. |
SidebarGroupAction | |
SidebarGroupContent | |
SidebarGroupLabel | Heading for a group. |
SidebarHeader | Top region, typically the logo or workspace switcher. |
SidebarInput | |
SidebarInset | The main content area beside the sidebar. |
SidebarMenu | The list of menu items within a group. |
SidebarMenuAction | |
SidebarMenuBadge | |
SidebarMenuButton | The interactive nav button; set isActive for the current page. |
SidebarMenuItem | A single menu row. |
SidebarMenuSkeleton | |
SidebarMenuSub | |
SidebarMenuSubButton | |
SidebarMenuSubItem | |
SidebarMenuSubmenu | A parent with subpages: an inline collapsible submenu when expanded, and an off-rail hover/focus flyout when the rail is collapsed to icons. Pass the parent button as `trigger` and the SidebarMenuSubItem rows as children. |
SidebarProvider | Context provider owning open/collapsed state; wrap the whole layout. |
SidebarRail | |
SidebarSeparator | |
SidebarTrigger | Button that toggles the sidebar open/collapsed. |
Props
| Part | Prop | Type | Default |
|---|---|---|---|
Sidebar | variant | "default" | "outline" | "default" |
Sidebar | size | "default" | "sm" | "lg" | "default" |