Toggle Sidebar B
header.lightDarkMode D

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.

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

PropTypeDefaultDescription
modelValuestringOpen menu item value. Supports v-model.
delayDurationnumber200Hover-open delay in ms.

Events

EventDescription
update:modelValueFires when the active panel changes.

NavigationMenuItem / NavigationMenuTrigger

Props

PropTypeDefaultDescription
valuestring(NavigationMenuItem) Identifier matched against modelValue. Trigger opens its panel.

NavigationMenuContent

Props

PropTypeDefaultDescription
classstringThe mega-menu panel. Forwards interaction props to reka-ui NavigationMenuContent.

NavigationMenuLink

Props

PropTypeDefaultDescription
asChildbooleanfalseRender into a child element such as NuxtLink.
activebooleanfalseMark the link as the current page.

Events

EventDescription
selectFires when the link is chosen; closes the menu.

Accessibility

Keyboard shortcuts and ARIA behavior.

Keyboard

ShortcutDescription
TabMoves focus to the next trigger or link.
Shift+TabMoves focus to the previous trigger or link.
EnterOpens the panel for the focused trigger.
SpaceOpens the panel for the focused trigger.
Moves focus within an open content panel.
EscCloses 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.