Navigation Menu

Horizontal navigation with hover-triggered mega-menu panels. Best for marketing-site headers where each top-level item reveals a grid of categorised links.

Default

Triggers reveal panels of titled links: a simple list, a two-column grid, and a compact list with icons. The last item is a plain link styled like a trigger.

Link Component

Use as-child to compose a custom link component such as NuxtLink, and navigationMenuTriggerStyle() to make it match the triggers beside it.

Without viewport

Set viewport to false and each item renders its own panel in place instead of sharing one animated viewport under the menu.

API Reference

NavigationMenu

Prop	Type	Default	Description
`modelValue`	`string`	—	Open menu item value. Supports v-model.
`delayDuration`	`number`	`200`	Hover-open delay in ms.
`viewport`	`boolean`	`true`	Render panels in one shared animated viewport below the menu. Set false to render each panel in place under its own item.

Event	Description
`update:modelValue`	Fires when the active panel changes.

NavigationMenuItem / NavigationMenuTrigger

Prop	Type	Default	Description
`value`	`string`	—	(NavigationMenuItem) Identifier matched against modelValue. Trigger opens its panel.

NavigationMenuContent

Prop	Type	Default	Description
`class`	`string`	—	The mega-menu panel. Forwards interaction props to reka-ui NavigationMenuContent.

NavigationMenuLink

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render into a child element such as NuxtLink.
`active`	`boolean`	`false`	Mark the link as the current page.

Event	Description
`select`	Fires when the link is chosen; closes the menu.

NavigationMenuViewport

Prop	Type	Default	Description
`class`	`string`	—	The shared animated panel container. Rendered automatically when NavigationMenu has viewport (the default); omit it when viewport is false.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Moves focus to the next trigger or link.
`Shift` + `Tab`	Moves focus to the previous trigger or link.
`Enter`	Opens the panel for the focused trigger.
`Space`	Opens the panel for the focused trigger.
`↓`	Moves focus within an open content panel.
`Esc`	Closes the open panel.

Panels open on hover or keyboard focus of their trigger.
Links inside a panel are normal tab stops rather than a roving-tabindex menu.

Native Select Notifications