Sidebar
1. Left Navigation Sidenav (side='left', variant='collapsible')
2. Right Property Inspector Panel (side='right')
3. Drag-Resizable Rail (resizable={true})
4. Floating Card Variant (variant='floating')
5. Inset Panel Variant (variant='inset')
Compound Components & Sub-Component API Documentation
1. <Sidebar> Root Container
Root panel primitive managing context state (`side`, `variant`, `collapsed`, `resizable`).
| Prop | Type | Default |
|---|---|---|
| side | "left" | "right" | — |
| variant | "fixed" | "collapsible" | "floating" | "inset" | — |
| collapsibleMode | "icon" | "offcanvas" | "none" | — |
| collapsed | boolean | — |
| onCollapsedChange | (collapsed: boolean) => void | — |
| defaultCollapsed | boolean | — |
| width | string | — |
| resizable | boolean | — |
| minWidth | number | — |
| maxWidth | number | — |
| children | ReactNode | — |
| className | string | — |
2. <SidebarTrigger> Toggle Button
Auto-wires click handler to toggle parent <Sidebar> collapse state, rendering PanelLeft or PanelRight icon matching side.
SidebarTrigger takes no props beyond className and the native element's attributes.
3. <SidebarHeader> Top Section
Header top bar wrapper for logo, title, and collapse triggers. Automatically centers content when collapsed.
SidebarHeader takes no props beyond className and the native element's attributes.
4. <SidebarBody> Scrollable Content
Scrollable main body container (`flex-1 overflow-y-auto pg-scroll`) holding sections and items.
SidebarBody takes no props beyond className and the native element's attributes.
5. <SidebarSection> Group Container
Logical section container with an optional uppercase title label. Automatically hides title when collapsed.
| Prop | Type | Default |
|---|---|---|
| title | string | — |
6. <SidebarNavItem> Navigation Rail Item
Specialized navigation item button/link that automatically reacts to collapse state (hides text label and renders a hover Tooltip when collapsed).
| Prop | Type | Default |
|---|---|---|
| icon | ReactNode | — |
| label* | string | — |
| active | boolean | — |
| badge | ReactNode | — |
| href | string | — |
| onClick | () => void | — |
| className | string | — |
* required
7. <SidebarFooter> Bottom Section
Footer container for user avatar, settings trigger, or profile info.
SidebarFooter takes no props beyond className and the native element's attributes.