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

Two top-level items with content panels.

Simple links

Top-level links with no dropdown panel, styled like triggers.

Grid panel

A content panel laid out as a small grid of titled links.

API Reference

Props, events, and slots for each sub-component.

NavigationMenu

Props

Prop	Type	Default	Description
modelValue	string	—	Open menu item value. Supports v-model.
delayDuration	number	200	Hover-open delay in ms.

Events

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

NavigationMenuItem / NavigationMenuTrigger

Props

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

NavigationMenuContent

Props

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

NavigationMenuLink

Props

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.

Events

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

Accessibility

Keyboard shortcuts and ARIA behavior.

Keyboard

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.

Multi Select Notifications