SidebarPro
App sidebar that collapses to icons, with nested groups, badges and a gliding active marker.
When to use
- The main navigation of an app or admin.
When not to use
- Marketing sites: use a navigation menu.
Installation
Usage
Import it from @/components/ui/sidebar after installing.
example.tsx
import { Home, Users } from "lucide-react";
import { Sidebar } from "@/components/ui/sidebar";
<Sidebar active={page} onNavigate={setPage} sections={[{ items: [
{ id: "home", label: "Home", icon: <Home /> },
{ id: "team", label: "Team", icon: <Users />, badge: 3 },
] }]} />API reference
Sidebar
A collapsible column of sections, items, nested groups and badges.
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | { title?; items: SidebarItem[] }[] | – | SidebarItem: { id, label, icon, href?, badge?, children? }. |
| active / onNavigate | string / (id) => void | – | Current page; onNavigate makes links client-side. |
| header / footer | ReactNode | – | Slots, e.g. workspace switcher and user. |
| collapsed / defaultCollapsed / onCollapsedChange | boolean | – | Controlled or uncontrolled. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move through items |
| Enter | Open an item or toggle a group |
Accessibility
- A labelled nav; the current page has aria-current="page".
- Collapsed items keep their names via aria-label and show a tooltip.
- Groups are buttons with aria-expanded.
Motion
- Width springs between 248px and 64px; groups expand by height; the active marker glides between items.
Responsive behavior
- Full height of its parent; on phones, put it in a drawer.
Performance
- Collapsed groups don't render their children.
Notes for AI
- Persist the collapsed state with onCollapsedChange.
This page as Markdown, for assistants and coding agents:
/components/sidebar/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt