Ravox KitNavigation
Sidebar
The navigation of an admin dashboard, in parts: groups, items with an icon and count, header and footer. Collapses to icons only (with a tooltip), remembers the choice, toggles with Ctrl/⌘ + B and becomes a drawer on narrow screens.
Settings
Toggles
Examples
Narrow screen: becomes a drawer
Collapsed, wraps on mobile
Installation
The command creates components/ui/sidebar.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add sidebarProps
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultCollapsed | boolean | false | Collapsed at the start; the remembered value wins (SidebarProvider). |
| collapsed / onCollapsedChange | boolean / (collapsed: boolean) => void | — | Controlled mode, e.g. a value read from a cookie on the server, with no jump on first paint (SidebarProvider). |
| storageKey | string | null | "ravox-sidebar" | localStorage key that remembers the state; null turns it off (SidebarProvider). |
| shortcut | string | null | "b" | Key that, with Ctrl or ⌘, collapses and opens; null turns it off (SidebarProvider). |
| label | string | "Sidebar" | Name of the <aside> and the drawer (Sidebar). |
| label / collapsible / defaultOpen | ReactNode / boolean / boolean | — | Group title; collapsible turns it into a button that opens and closes (SidebarGroup). |
| icon / count / active | ReactNode / number / boolean | — | Icon, number on the right (becomes a dot when collapsed) and aria-current="page" (SidebarItem). |
| href / asChild / onClick | string / boolean / MouseEventHandler | — | A link, Next's <Link> as the child, or a button without href (SidebarItem). |
| useSidebar() | { collapsed, toggle, drawerOpen, … } | — | The state of the bar for your own components (e.g. hide the brand name when collapsed). |
| SidebarTrigger | ComponentProps<"button"> | — | Collapses and opens on wide screens; opens the drawer on narrow ones. Put it in the page header. |