Preview

Installation

npx sigma-ui@latest add navigation-menu

Usage

<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
</script>

<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink href="/docs">
            Link
          </NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>

• An item with a <NavigationMenuTrigger> opens its <NavigationMenuContent> panel on hover or click.
• An item with only a <NavigationMenuLink> renders a top-level link.

Examples

Link Component

To render a router link such as Nuxt's <NuxtLink />, use as-child and apply the trigger styles with navigationMenuTriggerStyle().

<script setup lang="ts">
import {
  NavigationMenuItem,
  NavigationMenuLink,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu';
</script>

<template>
  <NavigationMenuItem>
    <NavigationMenuLink
      as-child
      :class="navigationMenuTriggerStyle()"
    >
      <NuxtLink to="/docs">
        Documentation
      </NuxtLink>
    </NavigationMenuLink>
  </NavigationMenuItem>
</template>

API Reference

NavigationMenu

Props

Prop	Type	Default
modelValue The controlled value of the menu item to activate. Can be used as v-model.	string	-
defaultValue The value of the menu item that should be active when initially rendered. Use when you do not need to control the value state.	string	-
dir The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction$3	-
orientation The orientation of the menu.	Orientation	-
delayDuration The duration from when the pointer enters the trigger until the tooltip gets opened.	number	200
skipDelayDuration How much time a user has to enter another trigger without incurring a delay again.	number	300
disableClickTrigger If true, menu cannot be open by click on trigger	boolean	false
disableHoverTrigger If true, menu cannot be open by hover on trigger	boolean	false
disablePointerLeaveClose If true, menu will not close during pointer leave event	boolean	false
unmountOnHide When true, the element will be unmounted on closed state.	boolean	`true`
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
update:modelValue Event handler called when the value changes.	[value: string]

Slots

Slot	Scope
default The content of the component.	-

NavigationMenuList

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

NavigationMenuItem

Props

Prop	Type	Default
value A unique value that associates the item with an active value when the navigation menu is controlled. This prop is managed automatically when uncontrolled.	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

NavigationMenuTrigger

Props

Prop	Type	Default
disabled When true, prevents the user from interacting with item	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

NavigationMenuContent

Props

Prop	Type	Default
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
disableOutsidePointerEvents When true, hover/focus/click interactions will be disabled on elements outside the DismissableLayer. Users will need to click twice on outside elements to interact with them: once to close the DismissableLayer, and again to trigger the element.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
escapeKeyDown Event handler called when the escape key is down. Can be prevented.	[event: KeyboardEvent]
pointerDownOutside Event handler called when a pointerdown event happens outside of the DismissableLayer. Can be prevented.	[event: PointerDownOutsideEvent]
focusOutside Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.	[event: FocusOutsideEvent]
interactOutside Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.	[event: PointerDownOutsideEvent | FocusOutsideEvent]

Slots

Slot	Scope
default The content of the component.	-

NavigationMenuLink

Props

Prop	Type	Default
active Used to identify the link as the currently active page.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
select Event handler called when the user selects a link (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the navigation menu from closing when selecting that link.	[payload: CustomEvent<{ originalEvent: Event; }>]

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Adheres to the Disclosure Navigation Menu WAI-ARIA example. Reka UI manages focus and the aria-expanded state of the triggers.

Key	Description
Space	When focus is on a trigger, opens its content.
Enter	When focus is on a trigger, opens its content.
Tab	Moves focus to the next focusable element.
ArrowDown	When focus is on a trigger in a horizontal menu, opens its content and focuses the first link. Moves focus to the next item in a vertical menu.
ArrowUp	Moves focus to the previous item in a vertical menu.
ArrowRight	Moves focus to the next trigger or link in a horizontal menu.
ArrowLeft	Moves focus to the previous trigger or link in a horizontal menu.
Home	Moves focus to the first trigger or link.
End	Moves focus to the last trigger or link.
Esc	Closes the open content and moves focus to its trigger.