Navigation Menu
A site's navigation, with panels under it.
Default
One panel of components, and one plain link marked as the page you are on.
Links, not actions: what opens is a panel of places to go. The panels share one box, which grows and shrinks to the size of whichever is open, so moving between them is one movement rather than a collapse and an expansion.
Installation
npx philcn@latest add navigation-menuThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| NavigationMenu.value | string | Controlled: which panel is open. |
| NavigationMenu.viewport | boolean | The shared box the panels open into. Off, and each panel sits under its own trigger. |
| NavigationMenu.delayDuration | number | How long the pointer must rest before a panel opens. |
| NavigationMenu.skipDelayDuration | number | How long the menu stays warm afterwards, so moving to the next trigger opens it at once. |
| NavigationMenuLink.active | boolean | Marks the link to the page being read, for the eye and for a screen reader. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- The shared box's size is measured and published as CSS variables, under our own names and under the `--radix-*` names as well, so a block pasted from shadcn finds what it expects.