Shell
Sidebar
A nested side-navigation surface with active-link styling and optional small-screen collapse behavior.
Curated demo
Reference
A nested side-navigation surface with active-link styling and optional small-screen collapse behavior.
- Use Sidebar for local navigation, docs tables of contents, or settings sections.
- The collapsible mode is intentionally simple and coordinates with Drawer for richer mobile navigation.
Props
| Name | Type | Default | Description |
|---|---|---|---|
items | SidebarItem[] | — | Navigation items. |
activeHref | string | — | Href to mark current. |
label | string | 'Sidebar navigation' | Navigation label. |
collapsible | boolean | false | Enable mobile collapse button. |
class | string | — | Additional CSS classes. |
Example snippet
<Sidebar activeHref="/components" items={[{ label: "Components", href: "/components" }]} />