Navigation menuPro
Header menu whose panels slide between triggers and morph to fit, with featured cards.
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
Usage
Import it from @/components/ui/navigation-menu after installing.
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 |
|---|---|
| EnterorSpace | 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.
This page as Markdown, for assistants and coding agents:
/components/navigation-menu/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt