# Navigation menu

> Header menu whose panels slide between triggers and morph to fit, with featured cards.

Component · Pro · https://lodeui.com/components/navigation-menu

## When to use

- Marketing site headers with grouped links.

## When not to use

- App navigation: use a sidebar.
- Phones: collapse to a menu button.

## Installation

```bash
npx shadcn@latest add @lode/navigation-menu
```

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 { NavigationMenu } from "@/components/ui/navigation-menu";

<NavigationMenu items={[
  { label: "Product", links: [{ label: "Analytics", href: "/analytics", description: "Dashboards", icon: <BarChart3 /> }] },
  { label: "Pricing", href: "/pricing" },
]} />
```

## API reference

### NavigationMenu

Triggers open panels on hover or click; the panel slides and resizes between triggers.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `NavEntry[]` | – | Plain links { label, href } or groups { label, links, featured? }. |
| aria-label | `string` | `"Main"` | Names the navigation. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open or close a panel |
| ↓ | Open and move into the panel |
| Tab | Move through links |
| Esc | Close and return to the trigger |

## Accessibility

- Triggers are buttons with aria-expanded and aria-controls; panel items are plain links.
- Opens on click too, so it works without hover.

## Motion

- The panel slides left or right depending on which trigger you moved to, and its frame morphs to the new size.

## Responsive behavior

- Panels cap at the viewport width; the featured card hides below 640px.

## Performance

- Only the open panel renders.

## Notes for AI

- Keep panels to 3–6 links; put the most important one first.

## Related

- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Sidebar](https://lodeui.com/components/sidebar) — App sidebar that collapses to icons, with nested groups, badges and a gliding active marker.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.