Sidebar
The app's primary navigation column — brand, nav, and the account card at the foot.
The app's navigation column, used by the dashboard, site settings and the builder panels. It is a set of parts — SidebarTop, SidebarBrand, SidebarNav, SidebarDivider — rather than one configurable component.
Default
variant="embedded" drops the outer surface for a sidebar nested inside something that already has one. compact switches to the tighter Figma sizing: 12px gutter, 30px search, 32px rows.
Props
Sidebar
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "panel" | "embedded" | "panel" | `embedded` removes the surface for a nested sidebar. |
compact | boolean | false | Tighter sizing: 12px gutter, 30px search, 32px rows, 12px labels. |
aria-label | string | — | Names the landmark. Give every sidebar one. |