# Sidebar

Nav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/sidebar
```

## Usage

```tsx
import { Sidebar } from '@/components/fetaui/sidebar'

export function Example() {
  return <Sidebar sections={sections} collapsed={collapsed} onNavigate={go} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| sections | SidebarSection[] | required |
| header | ReactNode |  |
| search | ReactNode |  |
| promo | ReactNode |  |
| footer | ReactNode |  |
| bottomLinks | SidebarLink[] | [] |
| active | string |  |
| defaultActive | string |  |
| onNavigate | (id) => void |  |
| collapsed | boolean | false |
| mode | rail, drawer | rail |
| defaultOpen | string[] | [] |
| aria-label | string | Main |
| animated | boolean | true |

## When to use

- For apps with many sections.
- Keep labels short.

## When not to use

- For marketing sites: use Navigation Menu.

## Accessibility

- A nav landmark with a label.
- The active row uses aria-current.
- Groups use aria-expanded.
- On the rail, rows are named and show labels as tooltips. A group goes to its first child and marks itself active for any child.

## Motion

- The active surface glides between rows on a spring.
- Groups fade in over 120 ms and the chevron turns.
- Collapsing closes the tray with a clip over 260 ms, and the icons stay put.
- With reduced motion, the surface jumps and the rail snaps.