# Sidebar

> App sidebar that collapses to icons, with nested groups, badges and a gliding active marker.

Component · Pro · https://lodeui.com/components/sidebar

## When to use

- The main navigation of an app or admin.

## When not to use

- Marketing sites: use a navigation menu.

## Installation

```bash
npx shadcn@latest add @lode/sidebar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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.

## Related

- [Navigation menu](https://lodeui.com/components/navigation-menu) — Header menu whose panels slide between triggers and morph to fit, with featured cards.
- [Bottom nav](https://lodeui.com/components/bottom-nav) — Mobile tab bar with an animated indicator, badges and safe-area padding.
- [Admin dashboard](https://lodeui.com/templates/admin-dashboard) — App shell with sidebar (drawer on mobile), top bar, breadcrumbs and pages for overview, customers, team, billing and API keys.