navigation-menu

Part	File	Does
NavigationMenu	NavigationMenu.vue	Groups all parts of the navigation menu.
NavigationMenuContent	NavigationMenuContent.vue	Holds the links and content shown when its menu item is open.
NavigationMenuIndicator	NavigationMenuIndicator.vue	Points to the trigger of the currently open navigation menu item.
NavigationMenuItem	NavigationMenuItem.vue	Groups a trigger with the content it opens, or holds a single link.
NavigationMenuLink	NavigationMenuLink.vue	Links to a page from the navigation menu.
NavigationMenuList	NavigationMenuList.vue	Lists the top-level items of the navigation menu.
NavigationMenuTrigger	NavigationMenuTrigger.vue	Opens and closes the content of its navigation menu item.
NavigationMenuViewport	NavigationMenuViewport.vue	Shows the content of the open navigation menu item.

Anatomy

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent>
        <NavigationMenuLink />
      </NavigationMenuContent>
      <NavigationMenuLink />
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Styling

Part	Recipe
NavigationMenu	navigation-menu
NavigationMenuContent	navigation-menu-content
NavigationMenuIndicator	navigation-menu-indicator
NavigationMenuIndicator	navigation-menu-indicator-arrow
NavigationMenuLink	navigation-menu-link
NavigationMenuList	navigation-menu-list
NavigationMenuTrigger	navigation-menu-trigger
NavigationMenuViewport	navigation-menu-viewport

Install

Writes 10 files into components/ui/navigation-menu/. For agents, npx @frontic/ui docs navigation-menu prints this reference as markdown; the MCP server serves the same.

npm packages: @lucide/vue; @vueuse/core; class-variance-authority; reka-ui

API reference

NavigationMenu NavigationMenu.vue

Groups all parts of the navigation menu. Renders a <nav>.

Prop	Type	Default
modelValue	string	—

defaultValue	string	—

dir	Direction	—

orientation	Orientation	'horizontal'

delayDuration	number	200

skipDelayDuration	number	300

disableClickTrigger	boolean	false

disableHoverTrigger	boolean	false

disablePointerLeaveClose	boolean	false

unmountOnHide	boolean	true

asChild	boolean	false

as	AsTag \| Component	'nav'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'nav'
class	ClassValue	—

viewport	boolean	true

Event	Payload
update:modelValue	value: string

Slot	Slot props
default	{ modelValue: string; }

Data attribute	Values
data-viewport	—

Recipe navigation-menu	Sets
base: navigation-menu	5 properties

Navigation Menu

Parts

Anatomy

Styling

Install

API reference

NavigationMenu NavigationMenu.vue

NavigationMenuContent NavigationMenuContent.vue

NavigationMenuIndicator NavigationMenuIndicator.vue

NavigationMenuItem NavigationMenuItem.vue

NavigationMenuLink NavigationMenuLink.vue

NavigationMenuList NavigationMenuList.vue

NavigationMenuTrigger NavigationMenuTrigger.vue

NavigationMenuViewport NavigationMenuViewport.vue