ui/docs/content/3.components/navigation-menu.md

title, description, category, links

title	description	category	links
NavigationMenu	A list of links that can be displayed horizontally or vertically.	navigation	label icon to NavigationMenu i-custom-reka-ui https://reka-ui.com/docs/components/navigation-menu label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/tree/v3/src/runtime/components/NavigationMenu.vue

Usage

Items

Use the items prop as an array of objects with the following properties:

• label?: string{lang="ts-type"}
• icon?: string{lang="ts-type"}
• avatar?: AvatarProps{lang="ts-type"}
• badge?: string | number | BadgeProps{lang="ts-type"}
• tooltip?: TooltipProps{lang="ts-type"}
• trailingIcon?: string{lang="ts-type"}
• type?: 'label' | 'trigger' | 'link'{lang="ts-type"}
• defaultOpen?: boolean{lang="ts-type"}
• open?: boolean{lang="ts-type"}
• value?: string{lang="ts-type"}
• disabled?: boolean{lang="ts-type"}
• slot?: string{lang="ts-type"}
• onSelect?(e: Event): void{lang="ts-type"}
• children?: NavigationMenuChildItem[]{lang="ts-type"}
• class?: any{lang="ts-type"}
• ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }{lang="ts-type"}

You can pass any property from the Link component such as to, target, etc.

::component-code

collapse: true ignore:

• items
• class external:
• items externalTypes:
• NavigationMenuItem[] props: items:
  • label: Guide icon: i-lucide-book-open to: /getting-started children:
    • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
    • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
    • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
    • label: 'Colors' icon: 'i-lucide-swatch-book' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
    • label: 'Theme' icon: 'i-lucide-cog' description: 'You can customize components by using the class / ui props or in your app.config.ts.'
  • label: Composables icon: i-lucide-database to: /composables children:
    • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
    • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
    • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
  • label: Components icon: i-lucide-box to: /components active: true children:
    • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
    • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
    • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
    • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination
    • label: Popover icon: i-lucide-file-text description: Display a non-modal dialog that floats around a trigger element. to: /components/popover
    • label: Progress icon: i-lucide-file-text description: Show a horizontal bar to indicate task progression. to: /components/progress
  • label: GitHub icon: i-simple-icons-github badge: 3.8k to: https://github.com/nuxt/ui target: _blank
  • label: Help icon: i-lucide-circle-help disabled: true class: 'w-full justify-center'

---

::

::note You can also pass an array of arrays to the items prop to display groups of items. ::

::tip Each item can take a children array of objects with the following properties to create submenus:

• label: string
• description?: string
• icon?: string
• onSelect?(e: Event): void
• class?: any

::

Orientation

Use the orientation prop to change the orientation of the NavigationMenu.

::note When orientation is vertical, an Accordion component is used to display each group. You can control the open state of each item using the open and defaultOpen properties and change the behavior using the collapsible and type props. ::

::component-code

collapse: true ignore:

• items
• class external:
• items externalTypes:
• NavigationMenuItem[][] props: orientation: 'vertical' items:
  • • label: Links type: 'label'
    • label: Guide icon: i-lucide-book-open children:
      • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
      • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
      • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      • label: 'Colors' icon: 'i-lucide-swatch-book' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
      • label: 'Theme' icon: 'i-lucide-cog' description: 'You can customize components by using the class / ui props or in your app.config.ts.'
    • label: Composables icon: i-lucide-database children:
      • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
      • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
      • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
    • label: Components icon: i-lucide-box to: /components active: true defaultOpen: true children:
      • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
      • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
      • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
      • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination
      • label: Popover icon: i-lucide-file-text description: Display a non-modal dialog that floats around a trigger element. to: /components/popover
      • label: Progress icon: i-lucide-file-text description: Show a horizontal bar to indicate task progression. to: /components/progress
  • • label: GitHub icon: i-simple-icons-github badge: 3.8k to: https://github.com/nuxt/ui target: _blank
    • label: Help icon: i-lucide-circle-help disabled: true class: 'data-[orientation=vertical]:w-48'

---

::

::note Groups will be spaced when orientation is horizontal and separated when orientation is vertical. ::

Collapsed

In vertical orientation, use the collapsed prop to collapse the NavigationMenu, this can be useful in a sidebar for example.

::note You can use the tooltip and popover props to display more information on the collapsed items. ::

::component-code

collapse: true ignore:

• items
• orientation
• class external:
• items externalTypes:
• NavigationMenuItem[][] items: tooltip:
  • true
  • false popover:
  • true
  • false props: collapsed: true tooltip: false popover: false orientation: 'vertical' items:
  • • label: Links type: 'label'
    • label: Guide icon: i-lucide-book-open children:
      • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
      • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
      • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      • label: 'Colors' icon: 'i-lucide-swatch-book' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
      • label: 'Theme' icon: 'i-lucide-cog' description: 'You can customize components by using the class / ui props or in your app.config.ts.'
    • label: Composables icon: i-lucide-database children:
      • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
      • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
      • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
    • label: Components icon: i-lucide-box to: /components active: true children:
      • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
      • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
      • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
      • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination
      • label: Popover icon: i-lucide-file-text description: Display a non-modal dialog that floats around a trigger element. to: /components/popover
      • label: Progress icon: i-lucide-file-text description: Show a horizontal bar to indicate task progression. to: /components/progress
  • • label: GitHub icon: i-simple-icons-github badge: 3.8k to: https://github.com/nuxt/ui target: _blank
    • label: Help icon: i-lucide-circle-help disabled: true

---

::

Highlight

Use the highlight prop to display a highlighted border for the active item.

Use the highlight-color prop to change the color of the border. It defaults to the color prop.

::component-code

collapse: true prettier: true ignore:

• items
• class external:
• items externalTypes:
• NavigationMenuItem[][] props: highlight: true highlightColor: 'primary' orientation: 'horizontal' items:
  • • label: Guide icon: i-lucide-book-open children:
      • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
      • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
      • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      • label: 'Colors' icon: 'i-lucide-swatch-book' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
      • label: 'Theme' icon: 'i-lucide-cog' description: 'You can customize components by using the class / ui props or in your app.config.ts.'
    • label: Composables icon: i-lucide-database children:
      • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
      • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
      • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
    • label: Components icon: i-lucide-box to: /components active: true defaultOpen: true children:
      • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
      • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
      • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
      • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination
      • label: Popover icon: i-lucide-file-text description: Display a non-modal dialog that floats around a trigger element. to: /components/popover
      • label: Progress icon: i-lucide-file-text description: Show a horizontal bar to indicate task progression. to: /components/progress
  • • label: GitHub icon: i-simple-icons-github badge: 3.8k to: https://github.com/nuxt/ui target: _blank
    • label: Help icon: i-lucide-circle-help disabled: true class: 'data-[orientation=horizontal]:border-b border-default data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48'

---

::

::note In this example, the border-b class is applied to display a border in horizontal orientation, this is not done by default to let you have a clean slate to work with. ::

::caution In vertical orientation, the highlight prop only highlights the border of active children. ::

Color

Use the color prop to change the color of the NavigationMenu.

::component-code

ignore:

• items
• class external:
• items externalTypes:
• NavigationMenuItem[][] props: color: neutral items:
  • • label: Guide icon: i-lucide-book-open to: /getting-started
    • label: Composables icon: i-lucide-database to: /composables
    • label: Components icon: i-lucide-box to: /components active: true
  • • label: GitHub icon: i-simple-icons-github badge: 3.8k to: https://github.com/nuxt/ui target: _blank class: 'w-full'

---

::

Variant

Use the variant prop to change the variant of the NavigationMenu.

::component-code

ignore:

• items
• class external:
• items externalTypes:
• NavigationMenuItem[][] props: color: neutral variant: link highlight: false items:
  • • label: Guide icon: i-lucide-book-open to: /getting-started
    • label: Composables icon: i-lucide-database to: /composables
    • label: Components icon: i-lucide-box to: /components active: true
  • • label: GitHub icon: i-simple-icons-github badge: 3.8k to: https://github.com/nuxt/ui target: _blank class: 'w-full'

---

::

::note The highlight prop changes the pill variant active item style. Try it out to see the difference. ::

Trailing Icon

Use the trailing-icon prop to customize the trailing Icon of each item. Defaults to i-lucide-chevron-down. This icon is only displayed when an item has children.

::tip You can also set an icon for a specific item by using the trailingIcon property in the item object. ::

::component-code

collapse: true ignore:

• items
• class external:
• items externalTypes:
• NavigationMenuItem[] props: trailingIcon: 'i-lucide-arrow-down' items:
  • label: Guide icon: i-lucide-book-open to: /getting-started children:
    • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
    • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
    • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
    • label: 'Colors' icon: 'i-lucide-swatch-book' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
    • label: 'Theme' icon: 'i-lucide-cog' description: 'You can customize components by using the class / ui props or in your app.config.ts.'
  • label: Composables icon: i-lucide-database to: /composables children:
    • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
    • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
    • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
  • label: Components icon: i-lucide-box to: /components active: true children:
    • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
    • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
    • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
    • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination
    • label: Popover icon: i-lucide-file-text description: Display a non-modal dialog that floats around a trigger element. to: /components/popover
    • label: Progress icon: i-lucide-file-text description: Show a horizontal bar to indicate task progression. to: /components/progress class: 'w-full justify-center'

---

::

::framework-only #nuxt :::tip{to="/getting-started/icons/nuxt#theme"} You can customize this icon globally in your app.config.ts under ui.icons.chevronDown key. :::

#vue :::tip{to="/getting-started/icons/vue#theme"} You can customize this icon globally in your vite.config.ts under ui.icons.chevronDown key. ::: ::

Arrow

Use the arrow prop to display an arrow on the NavigationMenu content when items have children.

::component-code

collapse: true ignore:

• items
• arrow
• class external:
• items externalTypes:
• NavigationMenuItem[] props: arrow: true items:
  • label: Guide icon: i-lucide-book-open to: /getting-started children:
    • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
    • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
    • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
    • label: 'Colors' icon: 'i-lucide-swatch-book' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
    • label: 'Theme' icon: 'i-lucide-cog' description: 'You can customize components by using the class / ui props or in your app.config.ts.'
  • label: Composables icon: i-lucide-database to: /composables children:
    • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
    • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
    • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
  • label: Components icon: i-lucide-box to: /components active: true children:
    • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
    • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
    • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
    • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination
    • label: Popover icon: i-lucide-file-text description: Display a non-modal dialog that floats around a trigger element. to: /components/popover
    • label: Progress icon: i-lucide-file-text description: Show a horizontal bar to indicate task progression. to: /components/progress class: 'w-full justify-center'

---

::

::note The arrow is animated to follow the active item. ::

Content Orientation

Use the content-orientation prop to change the orientation of the content.

::warning This prop only works when orientation is horizontal. ::

::component-code

collapse: true ignore:

• items
• arrow
• class external:
• items externalTypes:
• NavigationMenuItem[] props: arrow: true contentOrientation: 'vertical' items:
  • label: Guide icon: i-lucide-book-open to: /getting-started children:
    • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
    • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
    • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
  • label: Composables icon: i-lucide-database to: /composables children:
    • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
    • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
    • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
  • label: Components icon: i-lucide-box to: /components active: true children:
    • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
    • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
    • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
    • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination class: 'w-full justify-center'

---

::

Unmount

Use the unmount-on-hide prop to control the content unmounting behavior. Defaults to true.

::component-code

collapse: true ignore:

• items
• arrow
• class external:
• items externalTypes:
• NavigationMenuItem[] props: unmountOnHide: false items:
  • label: Guide icon: i-lucide-book-open to: /getting-started children:
    • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
    • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
    • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
    • label: 'Colors' icon: 'i-lucide-swatch-book' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
    • label: 'Theme' icon: 'i-lucide-cog' description: 'You can customize components by using the class / ui props or in your app.config.ts.'
  • label: Composables icon: i-lucide-database to: /composables children:
    • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
    • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
    • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
  • label: Components icon: i-lucide-box to: /components active: true children:
    • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
    • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
    • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
    • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination
    • label: Popover icon: i-lucide-file-text description: Display a non-modal dialog that floats around a trigger element. to: /components/popover
    • label: Progress icon: i-lucide-file-text description: Show a horizontal bar to indicate task progression. to: /components/progress class: 'w-full justify-center'

---

::

::note You can inspect the DOM to see each item's content being rendered. ::

Examples

With tooltip in items :badge

When orientation is vertical and the menu is collapsed, you can set the tooltip prop to true to display a Tooltip around items with their label but you can also use the tooltip property on each item to override the default tooltip.

You can pass any property from the Tooltip component globally or on each item.

::component-code

collapse: true ignore:

• items
• orientation
• class external:
• items externalTypes:
• NavigationMenuItem[][] items: tooltip:
  • true
  • false props: tooltip: true collapsed: true orientation: 'vertical' items:
  • • label: Links type: 'label'
    • label: Guide icon: i-lucide-book-open children:
      • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
      • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
      • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      • label: 'Colors' icon: 'i-lucide-swatch-book' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
      • label: 'Theme' icon: 'i-lucide-cog' description: 'You can customize components by using the class / ui props or in your app.config.ts.'
    • label: Composables icon: i-lucide-database children:
      • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
      • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
      • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
    • label: Components icon: i-lucide-box to: /components active: true children:
      • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
      • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
      • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
      • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination
      • label: Popover icon: i-lucide-file-text description: Display a non-modal dialog that floats around a trigger element. to: /components/popover
      • label: Progress icon: i-lucide-file-text description: Show a horizontal bar to indicate task progression. to: /components/progress
  • • label: GitHub icon: i-simple-icons-github badge: 3.8k to: https://github.com/nuxt/ui target: _blank tooltip: text: 'Open on GitHub' kbds: - 3.8k
    • label: Help icon: i-lucide-circle-help disabled: true

---

::

With popover in items :badge

When orientation is vertical and the menu is collapsed, you can set the popover prop to true to display a Popover around items with their children but you can also use the popover property on each item to override the default popover.

You can pass any property from the Popover component globally or on each item.

::component-code

collapse: true ignore:

• items
• orientation
• class external:
• items externalTypes:
• NavigationMenuItem[][] items: popover:
  • true
  • false props: popover: true collapsed: true orientation: 'vertical' items:
  • • label: Links type: 'label'
    • label: Guide icon: i-lucide-book-open children:
      • label: Introduction description: Fully styled and customizable components for Nuxt. icon: i-lucide-house
      • label: Installation description: Learn how to install and configure Nuxt UI in your application. icon: i-lucide-cloud-download
      • label: 'Icons' icon: 'i-lucide-smile' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      • label: 'Colors' icon: 'i-lucide-swatch-book' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
      • label: 'Theme' icon: 'i-lucide-cog' description: 'You can customize components by using the class / ui props or in your app.config.ts.'
    • label: Composables icon: i-lucide-database popover: mode: 'click' children:
      • label: defineShortcuts icon: i-lucide-file-text description: Define shortcuts for your application. to: /composables/define-shortcuts
      • label: useOverlay icon: i-lucide-file-text description: Display a modal/slideover within your application. to: /composables/use-overlay
      • label: useToast icon: i-lucide-file-text description: Display a toast within your application. to: /composables/use-toast
    • label: Components icon: i-lucide-box to: /components active: true children:
      • label: Link icon: i-lucide-file-text description: Use NuxtLink with superpowers. to: /components/link
      • label: Modal icon: i-lucide-file-text description: Display a modal within your application. to: /components/modal
      • label: NavigationMenu icon: i-lucide-file-text description: Display a list of links. to: /components/navigation-menu
      • label: Pagination icon: i-lucide-file-text description: Display a list of pages. to: /components/pagination
      • label: Popover icon: i-lucide-file-text description: Display a non-modal dialog that floats around a trigger element. to: /components/popover
      • label: Progress icon: i-lucide-file-text description: Show a horizontal bar to indicate task progression. to: /components/progress
  • • label: GitHub icon: i-simple-icons-github badge: 3.8k to: https://github.com/nuxt/ui target: _blank tooltip: text: 'Open on GitHub' kbds: - 3.8k
    • label: Help icon: i-lucide-circle-help disabled: true

---

::

::tip{to="#with-content-slot"} You can use the #content slot to customize the content of the popover in the vertical orientation. ::

Control active item

You can control the active item by using the default-value prop or the v-model directive with the index of the item.

::component-example

collapse: true name: 'navigation-menu-model-value-example'

::

::note In this example, leveraging defineShortcuts, you can switch the active item by pressing :kbd{value="1"}, :kbd{value="2"}, or :kbd{value="3"}. ::

::tip You can also pass the value of one of the items if provided. ::

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

• #{{ item.slot }}{lang="ts-type"}
• #{{ item.slot }}-leading{lang="ts-type"}
• #{{ item.slot }}-label{lang="ts-type"}
• #{{ item.slot }}-trailing{lang="ts-type"}
• #{{ item.slot }}-content{lang="ts-type"}

::component-example

name: 'navigation-menu-custom-slot-example'

::

::tip{to="#slots"} You can also use the #item, #item-leading, #item-label, #item-trailing and #item-content slots to customize all items. ::

With content slot

Use the #item-content slot or the slot property (#{{ item.slot }}-content) to customize the content of a specific item.

::component-example

collapse: true name: 'navigation-menu-content-slot-example'

::

::note In this example, we add the sm:w-(--reka-navigation-menu-viewport-width) class on the viewport to have a dynamic width. This requires to set a width on the content's first child. ::

API

Props

:component-props

Slots

:component-slots

Emits

:component-emits

Theme

:component-theme