Components

A site's navigation: links, and labels that open panels of links below them, on hover (after openDelay; at once while another is open) or with a click or Enter. Escape, a click outside or Tab moving on closes it. Fill it with NavigationMenuItems, each a NavigationMenuLink, or a NavigationMenuTrigger and a NavigationMenuContent. Name it with aria-label when there's more than one nav on the page.

Prop	Type	Default
`closeDelay` How long a panel opened by the pointer stays after it leaves, in ms (time to reach the panel).	`number`	`200`
`openDelay` How long the pointer rests on a label before its panel opens, in ms.	`number`	`150`

<NavigationMenuItem>

One place in the menu: a link, or a label with its panel.

No props of its own; it accepts the props of the element it renders.

<NavigationMenuTrigger>

The label that opens its item's panel; a chevron after it turns over while it's open.

No props of its own; it accepts the props of the element it renders.

<NavigationMenuContent>

The panel: glass, below its label (above it if there's no room), lined up with its start. Lay out its links as you like.

Prop	Type	Default
`align`	`"center" \| "end" \| "start"`	`start`
`offset` Gap below the label, in px.	`number`	`8`

<NavigationMenuLink>

A link: one of the bar's labels at the top, or a row in a panel (with an optional description under its text). active marks the page you're on. With asChild, your router's link instead of an <a>.

Prop	Type	Default
`active` The page it leads to is the one you're on.	`boolean`	`—`
`asChild` Put its props on your own link (the single child), e.g. a router's Link.	`boolean`	`—`
`description` In a panel, a line under the link's text.	`string`	`—`

Zen

Navigation Menu

Import

Examples

Router

API reference

<NavigationMenu>

<NavigationMenuItem>

<NavigationMenuTrigger>

<NavigationMenuContent>

<NavigationMenuLink>