Sidebar
Composable navigation sidebar for application layouts
import {SidebarProvider,SidebarLayout,Sidebar,SidebarHeader,SidebarContent,SidebarFooter,SidebarGroup,SidebarGroupLabel,SidebarMenu,SidebarMenuItem,SidebarMenuButton,SidebarInset,SidebarTrigger,} from "@plexui/ui/components/Sidebar";Examples
Overview
Scrollable Content
Text-Only Navigation
Collapse Modes
Nested Navigation
Mobile Menu
Search
Skeleton
Group Label Sizes
size
Badges
Footer Cards
Reference
Structure
A Sidebar is composed of the following parts:
SidebarProvider– Handles collapsible state and provides context to all child components.SidebarLayout– Wrapper for sidebar and main content.Sidebar– The sidebar container.SidebarHeader/SidebarFooter– Sticky at the top and bottom of the sidebar.SidebarContent– Scrollable content area.SidebarGroup– Section within the content, with optional label.SidebarMenu/SidebarMenuItem/SidebarMenuButton– Navigation menu items.SidebarMenuSub/SidebarMenuSubButton– Nested submenu items.SidebarInset– Main content area next to the sidebar.SidebarTrigger– Toggle button for collapsing the sidebar.
Use Cmd+B (Mac) or Ctrl+B (Windows/Linux) to toggle the sidebar with keyboard.
SidebarProvider
Handles sidebar state and provides context to all child components. Wrap your application layout in this provider.
| Prop | Type | Default | Description |
|---|---|---|---|
collapsible | "offcanvas" | "icon" | "none" | "offcanvas" | Collapse behavior: offcanvas (drawer on mobile, full collapse on desktop), icon (icon rail), or none |
defaultOpen | boolean | true | Initial open state (uncontrolled) |
open | boolean | — | Controlled open state |
onOpenChange | (open: boolean) => void | — | Called when open state changes |
Sidebar
The main sidebar container. Renders as an <aside> element.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "sidebar" | "docs" | "sidebar" | Visual variant |
side | "left" | "right" | "left" | Which side the sidebar is on |
SidebarMenuButton
Renders a menu item button. Use isActive to highlight the current page.
| Prop | Type | Default | Description |
|---|---|---|---|
isActive | boolean | false | Highlight the current page |
tooltip | string | ReactNode | — | Label shown on hover when collapsed (icon mode). Hidden on mobile. |
SidebarGroupLabel
Renders a section label within a SidebarGroup. Supports two size variants.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "lg" | "lg" | sm — compact, tertiary; lg — larger, primary, more spacing |
SidebarMenuSub
Renders a collapsible submenu container for nested navigation.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | true | Whether submenu is expanded |
hasIcons | boolean | false | Align child items with parent text that has icons |
SidebarCard
Renders a promotional card in the sidebar footer for CTAs, upgrades, or announcements.
| Prop | Type | Default | Description |
|---|---|---|---|
dismissible | boolean | — | Shows dismiss button |
onDismiss | () => void | — | Callback when dismissed |
useSidebar
Hook to access sidebar state and controls from any component within SidebarProvider.
state– Current state:"expanded"or"collapsed"open/setOpen– Desktop sidebar open stateopenMobile/setOpenMobile– Mobile menu open stateisMobile– Whether the viewport is mobilecollapsible– Current collapsible modetoggleSidebar– Toggle function for both desktop and mobile