# Navigation Menu

A tray pill of triggers with soft panels that morph as you move across them.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/navigation-menu
```

## Usage

```tsx
import { NavigationMenu } from '@/components/fetaui/navigation-menu'

export function Example() {
  return <NavigationMenu items={[{ label: 'Docs', links: [{ title: 'Install', href: '/install' }] }]} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| items | NavigationEntry[] | required |
| brand | ReactNode |  |
| search | ReactNode |  |
| end | ReactNode |  |
| meta | ReactNode |  |
| aria-label | string | Main |
| defaultOpen | string |  |
| defaultExpanded | boolean | false |
| animated | boolean | true |

## When to use

- For marketing and docs sites.

## When not to use

- For apps with many sections: use Sidebar.
- For Mobile destinations: use Tab Bar.

## Accessibility

- A nav landmark with a label.
- Triggers use aria-expanded and aria-controls.
- Panels sit inside the nav and hold plain links.

## Motion

- Panels open in 200 ms from the trigger.
- Moving to another trigger morphs size and position with no close in between: the surface scales with its corners held round, and the content cross fades.
- One panel is open on the page at a time.
- With reduced motion, panels swap in place.