## Collapsible Sidebar (S—146)

An app sidebar that collapses to an icon rail; labels fade, a marker slides to the active item, icons get tooltips.

- URL: https://sundaeui.dev/components/collapsible-sidebar
- Category: Navigation & menus · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/collapsible-sidebar.json`
- Tags: sidebar, rail, app-shell, collapse, menu, navigation

Toggle and the sidebar narrows to icons while labels fade out; widening brings them back. A marker slides to the active item in both states.
A nested section expands in place when open. In the rail, hovering an icon shows its label as a tooltip.

### Usage

```tsx
import { CollapsibleSidebar } from '@/components/sundae/collapsible-sidebar'

<CollapsibleSidebar />
```

### Props

- `items` (`{ id: string; label: string; icon: ReactNode; count?: number; children?: { id: string; label: string }[] }[]`, required): Nav items.
- `collapsed / defaultCollapsed` (`boolean`, default `false`): Rail state.
- `onNavigate` (`(id: string) => void`): Called on click.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Dashboards and app shells with 4–10 top-level sections.

### When not to use

- Marketing sites: use a top nav.

### Accessibility

- A nav landmark; the toggle has aria-expanded. In the rail, items keep their accessible names.
- The active item has aria-current="page".
- Reduced motion removes the movement and keeps every state change.