A collapsible app sidebar with a sliding active indicator, badges and icon-only tooltips.
Sprint board
12 issues, 4 in review
npx shadcn@latest add https://hyperblur.dev/r/sidebar-nav.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-nav.tsx.
import { SidebarNav } from "@/components/hyperblur/sidebar-nav"
<SidebarNav
width={220}
brand="Orbit"
defaultActive="board"
groups={[
{
label: "Workspace",
items: [
{ id: "inbox", label: "Inbox", badge: 3 },
{ id: "board", label: "Board" },
],
},
]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { label?: string; items: SidebarNavItem[] }[] | required | Nav groups. Items take id, label, icon, badge and href (renders a link). |
| active | string | Controlled active item id. | |
| defaultActive | string | Initial active id when uncontrolled. Defaults to the first item. | |
| onChange | (id: string) => void | Called when an item is chosen. | |
| collapsed | boolean | Controlled collapsed state. | |
| defaultCollapsed | boolean | false | Initial collapsed state when uncontrolled. |
| onCollapsedChange | (collapsed: boolean) => void | Called when the collapse button is pressed. | |
| width | number | 240 | Expanded width in pixels. The collapsed width is 64px. |
| brand | ReactNode | Brand slot in the header. Hidden while collapsed. | |
| footer | ReactNode | Footer slot, for an account switcher or similar. | |
| color | string | "#2f7bff" | Accent color for the indicator bar, badge and focus ring. |