UI ComponentsLayout
Collapsable Sidebar
Vertical icon navigation that expands inline or over adjacent content on desktop and mobile.
Import
import { CollapsableSidebar } from "@puzzle-ui/ui";Groups and expansion
The sidebar starts collapsed. Its toggle expands labels and group headings. Navigation stays vertical on mobile, with the same toggle and groups as desktop. Expanded labels wrap to fit the available width.
Use expand="inline" to reserve the expanded width in the layout, or expand="over" to keep a compact rail while the navigation overlays adjacent content.
API
| Prop | Type | Default | Description |
|---|---|---|---|
items | CollapsableSidebarEntry[] | Required | Items or labelled groups. |
expand | "inline" | "over" | "inline" | Reserve space or overlay when expanded. |
collapsed | boolean | - | Controlled collapsed state. |
defaultCollapsed | boolean | true | Initial uncontrolled state. |
onCollapsedChange | (collapsed: boolean) => void | - | Expansion callback. |
ariaLabel | string | "Main navigation" | Navigation name. |
className, style | string, CSSProperties | - | Root styling. |
Items require id, icon, label, and either href or onClick; active marks the current item. Groups require id and items, with an optional label. Use stable IDs. Current links receive aria-current; icons are decorative.