Sidebar
Collapsible application sidebar with navigation items, optional header, and footer slot.
Examples
Basic
Minimal sidebar with flat navigation links.
With sections
Navigation grouped into labelled sections with a separator.
With active state
Highlighted active link using brand-subtle background.
With footer
User profile footer pinned to the bottom of the sidebar.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Sidebar } from "@rokle/components";import { Sidebar } from "@rokle/components";
export function Example() {
return <Sidebar />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| collapsed | boolean | false | Whether the sidebar is in collapsed icon-only mode. |
| onCollapsedChange | (collapsed: boolean) => void | - | Called when collapsed state changes. |
| children | ReactNode | - | Sidebar content. |