---
title: "NavigationMenu"
description: "A list of links that can be displayed horizontally or vertically."
canonical_url: "https://ui.nuxt.com/docs/components/navigation-menu"
---
# NavigationMenu
> A list of links that can be displayed horizontally or vertically.
## Usage
Use the NavigationMenu component to display a list of links horizontally or vertically.
```vue
```
### Items
Use the `items` prop as an array of objects with the following properties:
- `label?: string`
- `icon?: string`
- `avatar?: AvatarProps`
- `badge?: string | number | BadgeProps`
- [`chip?: boolean | ChipProps`](#with-chip-in-items)
- [`tooltip?: TooltipProps`](#with-tooltip-in-items)
- [`popover?: PopoverProps`](#with-popover-in-items)
- `trailingIcon?: string`
- `type?: 'label' | 'trigger' | 'link'`
- `defaultOpen?: boolean`
- `open?: boolean`
- `value?: string`
- `disabled?: boolean`
- [`slot?: string`](#with-custom-slot)
- `onSelect?: (e: Event) => void`
- `children?: NavigationMenuChildItem[]`
- `class?: any`
- `ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingChipSize?: 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 }`
You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
```vue
```
> [!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](/docs/components/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`](/docs/components/accordion#collapsible) and [`type`](/docs/components/accordion#multiple) props.
```vue
```
> [!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`](#with-tooltip-in-items) and [`popover`](#with-popover-in-items) props to display more information on the collapsed items.
```vue
```
### 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.
```vue
```
> [!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.
```vue
```
### Variant
Use the `variant` prop to change the variant of the NavigationMenu.
```vue
```
> [!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](/docs/components/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.
```vue
```
**Nuxt:**
> [!TIP]
> See: /docs/getting-started/integrations/icons/nuxt#theme
>
> You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
**Vue:**
> [!TIP]
> See: /docs/getting-started/integrations/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.
```vue
```
> [!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`.
```vue
```
### Unmount
Use the `unmount-on-hide` prop to control the content unmounting behavior. Defaults to `true`.
```vue
```
> [!NOTE]
>
> You can inspect the DOM to see each item's content being rendered.
## Examples
### Control active item
You can control the active item(s) by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to `item-${index}` for top-level items or `item-${level}-${index}` for nested items.
```vue [NavigationMenuModelValueExample.vue]
```
> [!TIP]
>
> Use the `value-key` prop to change the key used to match items when a `v-model` or `default-value` is provided.
> [!NOTE]
>
> In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcuts), you can switch the active item by pressing
>
>
>
>
>
> ,
>
>
>
>
>
> , or
>
>
>
>
>
> .
### With tooltip in items
When orientation is `vertical` and the menu is `collapsed`, you can set the `tooltip` prop to `true` to display a [Tooltip](/docs/components/tooltip) around items with their label but you can also use the `tooltip` property on each item to override the default tooltip. In `horizontal` orientation, you can use the `tooltip` property on each item to display a [Tooltip](/docs/components/tooltip) around items.
> [!NOTE]
>
> The `tooltip` property on an item will always display a tooltip regardless of the global `tooltip` prop.
You can pass any property from the [Tooltip](/docs/components/tooltip) component globally or on each item.
```vue
```
### With popover in items
When orientation is `vertical` and the menu is `collapsed`, you can set the `popover` prop to `true` to display a [Popover](/docs/components/popover) around items with their children but you can also use the `popover` property on each item to override the default popover.
> [!NOTE]
>
> The `popover` property on an item will always display a popover regardless of the global `popover` prop.
You can pass any property from the [Popover](/docs/components/popover) component globally or on each item.
```vue
```
> [!TIP]
> See: #with-content-slot
>
> You can use the `#content` slot to customize the content of the popover in the `vertical` orientation.
### With chip in items `4.5+`
Use the `chip` property to display a [Chip](/docs/components/chip) around the icon of the items, you can pass any of its props.
```vue
```
### With bottom tab bar
Use the `ui` prop to transform the NavigationMenu into a mobile-style bottom tab bar with icons and small labels, similar to YouTube or Instagram.
```vue [NavigationMenuBottomTabBarExample.vue]
```
### With collapsed labels
Use the `ui` prop to display a label underneath each icon when collapsed.
```vue [NavigationMenuCollapsedLabelExample.vue]
```
> [!TIP]
>
> You can also do this globally through the `app.config.ts` using [`compoundVariants`](/docs/getting-started/theme/components#compound-variants):
>
> ```ts [app/app.config.ts]
> export default defineAppConfig({
> ui: {
> navigationMenu: {
> compoundVariants: [{
> orientation: 'vertical',
> collapsed: true,
> class: {
> link: 'flex-col',
> linkLabel: 'block text-[10px]/3 text-center'
> }
> }]
> }
> }
> })
> ```
### With custom slot
Use the `slot` property to customize a specific item.
You will have access to the following slots:
- `#{{ item.slot }}`
- `#{{ item.slot }}-leading`
- `#{{ item.slot }}-label`
- `#{{ item.slot }}-trailing`
- `#{{ item.slot }}-content`
```vue [NavigationMenuCustomSlotExample.vue]
```
> [!TIP]
> See: #slots
>
> You can also use the `#item`, `#item-leading`, `#item-label`, `#item-trailing` and `#item-content` slots to customize all items.
### With trailing slot
Use the `#item-trailing` slot or the `slot` property (`#{{ item.slot }}-trailing`) to add a [DropdownMenu](/docs/components/dropdown-menu) that appears on hover, similar to Notion or Linear.
```vue [NavigationMenuTrailingSlotExample.vue]
```
### With content slot
Use the `#item-content` slot or the `slot` property (`#{{ item.slot }}-content`) to customize the content of a specific item.
```vue [NavigationMenuContentSlotExample.vue]
-
-
{{ child.label }}
{{ child.description }}
```
> [!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
```ts
/**
* Props for the NavigationMenu component
*/
interface NavigationMenuProps {
/**
* The element or component this component should render as.
*/
as?: any;
/**
* Determines whether a "single" or "multiple" items can be selected at a time.
*
* Only works when `orientation` is `vertical`.
* @default "\"multiple\" as never"
*/
type?: K | undefined;
/**
* The controlled value of the active item(s).
* - In horizontal orientation: always `string`
* - In vertical orientation with `type="single"`: `string`
* - In vertical orientation with `type="multiple"`: `string[]`
*
* Use this when you need to control the state of the items. Can be binded with `v-model`
*/
modelValue?: NavigationMenuModelValue | undefined;
/**
* The default active value of the item(s).
* - In horizontal orientation: always `string`
* - In vertical orientation with `type="single"`: `string`
* - In vertical orientation with `type="multiple"`: `string[]`
*
* Use when you do not need to control the state of the item(s).
*/
defaultValue?: NavigationMenuModelValue | undefined;
/**
* The icon displayed to open the menu.
*/
trailingIcon?: any;
/**
* The icon displayed when the item is an external link.
* Set to `false` to hide the external icon.
* @default "true"
*/
externalIcon?: any;
items?: T | undefined;
color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" | undefined;
variant?: "pill" | "link" | undefined;
/**
* The orientation of the menu.
* @default "\"horizontal\" as never"
*/
orientation?: O | undefined;
/**
* Collapse the navigation menu to only show icons.
* Only works when `orientation` is `vertical`.
*/
collapsed?: boolean | undefined;
/**
* Display a tooltip on the items with the label of the item.
* Only works when `orientation` is `vertical` and `collapsed` is `true`.
* `{ delayDuration: 0, content: { side: 'right' } }`{lang="ts-type"}
*/
tooltip?: boolean | TooltipProps | undefined;
/**
* Display a popover on the items when the menu is collapsed with the children list.
* `{ mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }`{lang="ts-type"}
*/
popover?: boolean | PopoverProps | undefined;
/**
* Display a line next to the active item.
*/
highlight?: boolean | undefined;
highlightColor?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" | undefined;
/**
* The content of the menu.
*/
content?: (Omit & Partial>) | undefined;
/**
* The orientation of the content.
* Only works when `orientation` is `horizontal`.
* @default "\"horizontal\""
*/
contentOrientation?: "horizontal" | "vertical" | undefined;
/**
* Display an arrow alongside the menu.
*/
arrow?: boolean | undefined;
/**
* The key used to get the value from the item.
* @default "\"value\""
*/
valueKey?: GetItemKeys | undefined;
/**
* The key used to get the label from the item.
* @default "\"label\""
*/
labelKey?: GetItemKeys | undefined;
ui?: { root?: ClassNameValue; list?: ClassNameValue; label?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkLeadingAvatar?: ClassNameValue; linkLeadingAvatarSize?: ClassNameValue; linkLeadingChipSize?: ClassNameValue; linkTrailing?: ClassNameValue; linkTrailingBadge?: ClassNameValue; linkTrailingBadgeSize?: ClassNameValue; linkTrailingIcon?: ClassNameValue; linkLabel?: ClassNameValue; linkLabelExternalIcon?: ClassNameValue; childList?: ClassNameValue; childLabel?: ClassNameValue; childItem?: ClassNameValue; childLink?: ClassNameValue; childLinkWrapper?: ClassNameValue; childLinkIcon?: ClassNameValue; childLinkLabel?: ClassNameValue; childLinkLabelExternalIcon?: ClassNameValue; childLinkDescription?: ClassNameValue; separator?: ClassNameValue; viewportWrapper?: ClassNameValue; viewport?: ClassNameValue; content?: ClassNameValue; indicator?: ClassNameValue; arrow?: ClassNameValue; } | undefined;
/**
* The duration from when the pointer enters the trigger until the tooltip gets opened.
* @default "0"
*/
delayDuration?: number | undefined;
/**
* If `true`, menu cannot be open by click on trigger
*/
disableClickTrigger?: boolean | undefined;
/**
* If `true`, menu cannot be open by hover on trigger
*/
disableHoverTrigger?: boolean | undefined;
/**
* How much time a user has to enter another trigger without incurring a delay again.
*/
skipDelayDuration?: number | undefined;
/**
* If `true`, menu will not close during pointer leave event
*/
disablePointerLeaveClose?: boolean | undefined;
/**
* When `true`, the element will be unmounted on closed state.
* @default "true"
*/
unmountOnHide?: boolean | undefined;
/**
* When `true`, prevents the user from interacting with the accordion and all its items
*/
disabled?: boolean | undefined;
/**
* When type is "single", allows closing content when clicking trigger for an open item.
* When type is "multiple", this prop has no effect.
* @default "true"
*/
collapsible?: boolean | undefined;
}
```
### Slots
```ts
/**
* Slots for the NavigationMenu component
*/
interface NavigationMenuSlots {
item(): any;
item-leading(): any;
item-label(): any;
item-trailing(): any;
item-content(): any;
list-leading(): any;
list-trailing(): any;
}
```
### Emits
```ts
/**
* Emitted events for the NavigationMenu component
*/
interface NavigationMenuEmits {
update:modelValue: (payload: [value: NavigationMenuModelValue | undefined]) => void;
}
```
## Theme
```ts [app.config.ts]
export default defineAppConfig({
ui: {
navigationMenu: {
slots: {
root: 'relative flex gap-1.5 [&>div]:min-w-0',
list: 'isolate min-w-0',
label: 'w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5',
item: 'min-w-0',
link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
linkLeadingIcon: 'shrink-0 size-5',
linkLeadingAvatar: 'shrink-0',
linkLeadingAvatarSize: '2xs',
linkLeadingChipSize: 'sm',
linkTrailing: 'group ms-auto inline-flex gap-1.5 items-center',
linkTrailingBadge: 'shrink-0',
linkTrailingBadgeSize: 'sm',
linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
linkLabel: 'truncate',
linkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
childList: 'isolate',
childLabel: 'text-xs text-highlighted',
childItem: '',
childLink: 'group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
childLinkWrapper: 'min-w-0',
childLinkIcon: 'size-5 shrink-0',
childLinkLabel: 'truncate',
childLinkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
childLinkDescription: 'text-muted',
separator: 'px-2 h-px bg-border',
viewportWrapper: 'absolute top-full left-0 flex w-full',
viewport: 'relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left,right] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-1',
content: '',
indicator: 'absolute left-0 data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-2 w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200',
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-1 rounded-xs'
},
variants: {
color: {
primary: {
link: 'focus-visible:before:ring-primary',
childLink: 'focus-visible:before:ring-primary'
},
secondary: {
link: 'focus-visible:before:ring-secondary',
childLink: 'focus-visible:before:ring-secondary'
},
success: {
link: 'focus-visible:before:ring-success',
childLink: 'focus-visible:before:ring-success'
},
info: {
link: 'focus-visible:before:ring-info',
childLink: 'focus-visible:before:ring-info'
},
warning: {
link: 'focus-visible:before:ring-warning',
childLink: 'focus-visible:before:ring-warning'
},
error: {
link: 'focus-visible:before:ring-error',
childLink: 'focus-visible:before:ring-error'
},
neutral: {
link: 'focus-visible:before:ring-inverted',
childLink: 'focus-visible:before:ring-inverted'
}
},
highlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
pill: '',
link: ''
},
orientation: {
horizontal: {
root: 'items-center justify-between',
list: 'flex items-center',
item: 'py-2',
link: 'px-2.5 py-1.5 before:inset-x-px before:inset-y-0',
childList: 'grid p-2',
childLink: 'px-3 py-2 gap-2 before:inset-x-px before:inset-y-0',
childLinkLabel: 'font-medium',
content: 'absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto'
},
vertical: {
root: 'flex-col',
link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
childLabel: 'px-1.5 py-0.5',
childLink: 'p-1.5 gap-1.5 before:inset-y-px before:inset-x-0'
}
},
contentOrientation: {
horizontal: {
viewportWrapper: 'justify-center',
content: 'data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]'
},
vertical: {
viewport: 'sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left) rtl:left-auto rtl:right-[calc(100%-var(--reka-navigation-menu-viewport-left)-var(--reka-navigation-menu-viewport-width))]'
}
},
active: {
true: {
childLink: 'before:bg-elevated text-highlighted',
childLinkIcon: 'text-default'
},
false: {
link: 'text-muted',
linkLeadingIcon: 'text-dimmed',
childLink: [
'hover:before:bg-elevated/50 text-default hover:text-highlighted',
'transition-colors before:transition-colors'
],
childLinkIcon: [
'text-dimmed group-hover:text-default',
'transition-colors'
]
}
},
disabled: {
true: {
link: 'cursor-not-allowed opacity-75'
}
},
highlight: {
true: ''
},
level: {
true: ''
},
collapsed: {
true: ''
}
},
compoundVariants: [
{
orientation: 'horizontal',
contentOrientation: 'horizontal',
class: {
childList: 'grid-cols-2 gap-2'
}
},
{
orientation: 'horizontal',
contentOrientation: 'vertical',
class: {
childList: 'gap-1',
content: 'w-60'
}
},
{
orientation: 'vertical',
collapsed: false,
class: {
childList: 'ms-5 border-s border-default',
childItem: 'ps-1.5 -ms-px',
content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
}
},
{
orientation: 'vertical',
collapsed: true,
class: {
link: 'px-1.5',
linkLabel: 'hidden',
linkTrailing: 'hidden',
content: 'shadow-sm rounded-sm min-h-6 p-1'
}
},
{
orientation: 'horizontal',
highlight: true,
class: {
link: [
'after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full',
'after:transition-colors'
]
}
},
{
orientation: 'vertical',
highlight: true,
level: true,
class: {
link: [
'after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full',
'after:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
class: {
link: [
'hover:text-highlighted hover:before:bg-elevated/50',
'transition-colors before:transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:text-default'
}
},
{
disabled: false,
variant: 'pill',
highlight: true,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-elevated/50'
}
},
{
disabled: false,
variant: 'pill',
highlight: false,
active: false,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-elevated/50'
}
},
{
color: 'primary',
variant: 'pill',
active: true,
class: {
link: 'text-primary',
linkLeadingIcon: 'text-primary group-data-[state=open]:text-primary'
}
},
{
color: 'secondary',
variant: 'pill',
active: true,
class: {
link: 'text-secondary',
linkLeadingIcon: 'text-secondary group-data-[state=open]:text-secondary'
}
},
{
color: 'success',
variant: 'pill',
active: true,
class: {
link: 'text-success',
linkLeadingIcon: 'text-success group-data-[state=open]:text-success'
}
},
{
color: 'info',
variant: 'pill',
active: true,
class: {
link: 'text-info',
linkLeadingIcon: 'text-info group-data-[state=open]:text-info'
}
},
{
color: 'warning',
variant: 'pill',
active: true,
class: {
link: 'text-warning',
linkLeadingIcon: 'text-warning group-data-[state=open]:text-warning'
}
},
{
color: 'error',
variant: 'pill',
active: true,
class: {
link: 'text-error',
linkLeadingIcon: 'text-error group-data-[state=open]:text-error'
}
},
{
color: 'neutral',
variant: 'pill',
active: true,
class: {
link: 'text-highlighted',
linkLeadingIcon: 'text-highlighted group-data-[state=open]:text-highlighted'
}
},
{
variant: 'pill',
active: true,
highlight: false,
class: {
link: 'before:bg-elevated'
}
},
{
variant: 'pill',
active: true,
highlight: true,
disabled: false,
class: {
link: [
'hover:before:bg-elevated/50',
'before:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
class: {
link: [
'hover:text-highlighted',
'transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:text-default'
}
},
{
color: 'primary',
variant: 'link',
active: true,
class: {
link: 'text-primary',
linkLeadingIcon: 'text-primary group-data-[state=open]:text-primary'
}
},
{
color: 'secondary',
variant: 'link',
active: true,
class: {
link: 'text-secondary',
linkLeadingIcon: 'text-secondary group-data-[state=open]:text-secondary'
}
},
{
color: 'success',
variant: 'link',
active: true,
class: {
link: 'text-success',
linkLeadingIcon: 'text-success group-data-[state=open]:text-success'
}
},
{
color: 'info',
variant: 'link',
active: true,
class: {
link: 'text-info',
linkLeadingIcon: 'text-info group-data-[state=open]:text-info'
}
},
{
color: 'warning',
variant: 'link',
active: true,
class: {
link: 'text-warning',
linkLeadingIcon: 'text-warning group-data-[state=open]:text-warning'
}
},
{
color: 'error',
variant: 'link',
active: true,
class: {
link: 'text-error',
linkLeadingIcon: 'text-error group-data-[state=open]:text-error'
}
},
{
color: 'neutral',
variant: 'link',
active: true,
class: {
link: 'text-highlighted',
linkLeadingIcon: 'text-highlighted group-data-[state=open]:text-highlighted'
}
},
{
highlightColor: 'primary',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-primary'
}
},
{
highlightColor: 'secondary',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-secondary'
}
},
{
highlightColor: 'success',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-success'
}
},
{
highlightColor: 'info',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-info'
}
},
{
highlightColor: 'warning',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-warning'
}
},
{
highlightColor: 'error',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-error'
}
},
{
highlightColor: 'neutral',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-inverted'
}
}
],
defaultVariants: {
color: 'primary',
highlightColor: 'primary',
variant: 'pill'
}
}
}
})
```
## Changelog
See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/NavigationMenu.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/navigation-menu.ts).
## Sitemap
See the full [sitemap](/sitemap.md) for all pages.