React Sidebar Nav
The application shell's spine: sectioned items with icons, mono count badges, expandable groups, and the primary active bar. The bottom-left toggle collapses it to a 56px rail — icons stay reachable with native tooltips, and the width animates without reflowing your content. Data-driven from one sections array; collapsed state can be controlled or internal.
Use the bottom-left toggle to collapse to a rail; the Registers group expands in place.
Installation
npx shadcn@latest add "http://localhost:3000/registry/sidebar-nav.json"
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | SidebarSection[] | — | { title?, items } groups |
| header / footer | React.ReactNode | — | Brand block / pinned bottom block |
| collapsed | boolean | — | Controlled rail mode (uncontrolled if omitted) |
| onCollapsedChange | (collapsed: boolean) => void | — | Collapse toggle callback |
SidebarItem: { label, icon?, href?, active?, badge?, children?: { label, href?, active? }[] } — items with children render as expandable groups.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.