v3.0.0-alpha.5
Components

NavigationMenu

NavigationMenuGitHub
A list of links that can be displayed horizontally or vertically.

Usage

Items

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

  • label?: string
  • icon?: string
  • avatar?: AvatarProps
  • badge?: string | number | BadgeProps
  • trailingIcon?: string
  • value?: string
  • disabled?: boolean
  • class?: any
  • slot?: string
  • select?(e: Event): void

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

<script setup lang="ts">
const items = ref([
  {
    label: 'Guide',
    icon: 'i-heroicons-book-open',
    to: '/getting-started',
    children: [
      {
        label: 'Introduction',
        description: 'Fully styled and customizable components for Nuxt.',
        icon: 'i-heroicons-home'
      },
      {
        label: 'Installation',
        description: 'Learn how to install and configure Nuxt UI in your application.',
        icon: 'i-heroicons-cloud-arrow-down'
      },
      {
        label: 'Icons',
        icon: 'i-heroicons-face-smile',
        description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      },
      {
        label: 'Colors',
        icon: 'i-heroicons-swatch',
        description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
      },
      {
        label: 'Theme',
        icon: 'i-heroicons-cog',
        description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-heroicons-circle-stack',
    to: '/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Define shortcuts for your application.',
        to: '/composables/define-shortcuts'
      },
      {
        label: 'useModal',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a modal within your application.',
        to: '/composables/use-modal'
      },
      {
        label: 'useSlideover',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a slideover within your application.',
        to: '/composables/use-slideover'
      },
      {
        label: 'useToast',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a toast within your application.',
        to: '/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-heroicons-cube-transparent',
    to: '/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Use NuxtLink with superpowers.',
        to: '/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a modal within your application.',
        to: '/components/modal'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a list of links.',
        to: '/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a list of pages.',
        to: '/components/pagination'
      },
      {
        label: 'Popover',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a non-modal dialog that floats around a trigger element.',
        to: '/components/popover'
      },
      {
        label: 'Progress',
        icon: 'i-heroicons-document-text-20-solid',
        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-heroicons-question-mark-circle',
    disabled: true
  }
])
</script>

<template>
  <UNavigationMenu :items="items" class="justify-center" />
</template>
You can pass an array of arrays to the items prop to display groups of items.
Each item can take a children array of objects with the following properties to create submenus:
  • label: string
  • description?: string
  • icon?: string
  • class?: any
  • select?(e: Event): void

Orientation

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

<script setup lang="ts">
const items = ref([
  [
    {
      label: 'Guide',
      icon: 'i-heroicons-book-open',
      to: '/getting-started'
    },
    {
      label: 'Composables',
      icon: 'i-heroicons-circle-stack',
      to: '/composables'
    },
    {
      label: 'Components',
      icon: 'i-heroicons-cube-transparent',
      to: '/components',
      active: true
    }
  ],
  [
    {
      label: 'GitHub',
      icon: 'i-simple-icons-github',
      badge: '3.8k',
      to: 'https://github.com/nuxt/ui',
      target: '_blank'
    }
  ]
])
</script>

<template>
  <UNavigationMenu orientation="vertical" :items="items" />
</template>
Groups will be spaced when orientation is horizontal and separated when orientation is vertical.

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.

<script setup lang="ts">
const items = ref([
  [
    {
      label: 'Guide',
      icon: 'i-heroicons-book-open',
      to: '/getting-started'
    },
    {
      label: 'Composables',
      icon: 'i-heroicons-circle-stack',
      to: '/composables'
    },
    {
      label: 'Components',
      icon: 'i-heroicons-cube-transparent',
      to: '/components',
      active: true
    }
  ],
  [
    {
      label: 'GitHub',
      icon: 'i-simple-icons-github',
      badge: '3.8k',
      to: 'https://github.com/nuxt/ui',
      target: '_blank'
    }
  ]
])
</script>

<template>
  <UNavigationMenu
    highlight
    orientation="horizontal"
    :items="items"
    class="data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-gray-200 dark:border-gray-800"
  />
</template>
In this example, the border-l and border-b classes are applied to display a gray line, this is not done by default to let you have a clean slate to work with.

Color

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

<script setup lang="ts">
const items = ref([
  [
    {
      label: 'Guide',
      icon: 'i-heroicons-book-open',
      to: '/getting-started'
    },
    {
      label: 'Composables',
      icon: 'i-heroicons-circle-stack',
      to: '/composables'
    },
    {
      label: 'Components',
      icon: 'i-heroicons-cube-transparent',
      to: '/components',
      active: true
    }
  ],
  [
    {
      label: 'GitHub',
      icon: 'i-simple-icons-github',
      badge: '3.8k',
      to: 'https://github.com/nuxt/ui',
      target: '_blank'
    }
  ]
])
</script>

<template>
  <UNavigationMenu color="gray" :items="items" />
</template>

Variant

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

<script setup lang="ts">
const items = ref([
  [
    {
      label: 'Guide',
      icon: 'i-heroicons-book-open',
      to: '/getting-started'
    },
    {
      label: 'Composables',
      icon: 'i-heroicons-circle-stack',
      to: '/composables'
    },
    {
      label: 'Components',
      icon: 'i-heroicons-cube-transparent',
      to: '/components',
      active: true
    }
  ],
  [
    {
      label: 'GitHub',
      icon: 'i-simple-icons-github',
      badge: '3.8k',
      to: 'https://github.com/nuxt/ui',
      target: '_blank'
    }
  ]
])
</script>

<template>
  <UNavigationMenu color="gray" variant="link" :items="items" />
</template>
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-heroicons-chevron-down-20-solid. This icon is only displayed when an item has children.

You can also set an icon for a specific item by using the trailingIcon property in the item object.
<script setup lang="ts">
const items = ref([
  {
    label: 'Guide',
    icon: 'i-heroicons-book-open',
    to: '/getting-started',
    children: [
      {
        label: 'Introduction',
        description: 'Fully styled and customizable components for Nuxt.',
        icon: 'i-heroicons-home'
      },
      {
        label: 'Installation',
        description: 'Learn how to install and configure Nuxt UI in your application.',
        icon: 'i-heroicons-cloud-arrow-down'
      },
      {
        label: 'Icons',
        icon: 'i-heroicons-face-smile',
        description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      },
      {
        label: 'Colors',
        icon: 'i-heroicons-swatch',
        description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
      },
      {
        label: 'Theme',
        icon: 'i-heroicons-cog',
        description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-heroicons-circle-stack',
    to: '/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Define shortcuts for your application.',
        to: '/composables/define-shortcuts'
      },
      {
        label: 'useModal',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a modal within your application.',
        to: '/composables/use-modal'
      },
      {
        label: 'useSlideover',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a slideover within your application.',
        to: '/composables/use-slideover'
      },
      {
        label: 'useToast',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a toast within your application.',
        to: '/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-heroicons-cube-transparent',
    to: '/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Use NuxtLink with superpowers.',
        to: '/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a modal within your application.',
        to: '/components/modal'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a list of links.',
        to: '/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a list of pages.',
        to: '/components/pagination'
      },
      {
        label: 'Popover',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a non-modal dialog that floats around a trigger element.',
        to: '/components/popover'
      },
      {
        label: 'Progress',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Show a horizontal bar to indicate task progression.',
        to: '/components/progress'
      }
    ]
  }
])
</script>

<template>
  <UNavigationMenu trailing-icon="i-heroicons-arrow-small-down-20-solid" :items="items" class="justify-center" />
</template>
You can customize this icon globally in your app.config.ts under ui.icons.chevronDown key.

Arrow

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

<script setup lang="ts">
const items = ref([
  {
    label: 'Guide',
    icon: 'i-heroicons-book-open',
    to: '/getting-started',
    children: [
      {
        label: 'Introduction',
        description: 'Fully styled and customizable components for Nuxt.',
        icon: 'i-heroicons-home'
      },
      {
        label: 'Installation',
        description: 'Learn how to install and configure Nuxt UI in your application.',
        icon: 'i-heroicons-cloud-arrow-down'
      },
      {
        label: 'Icons',
        icon: 'i-heroicons-face-smile',
        description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      },
      {
        label: 'Colors',
        icon: 'i-heroicons-swatch',
        description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
      },
      {
        label: 'Theme',
        icon: 'i-heroicons-cog',
        description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-heroicons-circle-stack',
    to: '/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Define shortcuts for your application.',
        to: '/composables/define-shortcuts'
      },
      {
        label: 'useModal',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a modal within your application.',
        to: '/composables/use-modal'
      },
      {
        label: 'useSlideover',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a slideover within your application.',
        to: '/composables/use-slideover'
      },
      {
        label: 'useToast',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a toast within your application.',
        to: '/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-heroicons-cube-transparent',
    to: '/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Use NuxtLink with superpowers.',
        to: '/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a modal within your application.',
        to: '/components/modal'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a list of links.',
        to: '/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a list of pages.',
        to: '/components/pagination'
      },
      {
        label: 'Popover',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a non-modal dialog that floats around a trigger element.',
        to: '/components/popover'
      },
      {
        label: 'Progress',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Show a horizontal bar to indicate task progression.',
        to: '/components/progress'
      }
    ]
  }
])
</script>

<template>
  <UNavigationMenu arrow :items="items" class="justify-center" />
</template>
The arrow is animated to follow the active item.

Examples

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.

<script setup lang="ts">
const items = [
  {
    label: 'Guide',
    icon: 'i-heroicons-book-open',
    children: [
      {
        label: 'Introduction',
        description: 'Fully styled and customizable components for Nuxt.',
        icon: 'i-heroicons-home'
      },
      {
        label: 'Installation',
        description: 'Learn how to install and configure Nuxt UI in your application.',
        icon: 'i-heroicons-cloud-arrow-down'
      },
      {
        label: 'Icons',
        icon: 'i-heroicons-face-smile',
        description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      },
      {
        label: 'Colors',
        icon: 'i-heroicons-swatch',
        description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
      },
      {
        label: 'Theme',
        icon: 'i-heroicons-cog',
        description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-heroicons-circle-stack',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Define shortcuts for your application.'
      },
      {
        label: 'useModal',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a modal within your application.'
      },
      {
        label: 'useSlideover',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a slideover within your application.'
      },
      {
        label: 'useToast',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a toast within your application.'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-heroicons-cube-transparent',
    children: [
      {
        label: 'Link',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Use NuxtLink with superpowers.'
      },
      {
        label: 'Modal',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a modal within your application.'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a list of links.'
      },
      {
        label: 'Pagination',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a list of pages.'
      },
      {
        label: 'Popover',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Display a non-modal dialog that floats around a trigger element.'
      },
      {
        label: 'Progress',
        icon: 'i-heroicons-document-text-20-solid',
        description: 'Show a horizontal bar to indicate task progression.'
      }
    ]
  }
]

const active = ref('0')

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    active.value = String((Number(active.value) + 1) % items.length)
  }, 2000)
})
</script>

<template>
  <UNavigationMenu v-model="active" :items="items" class="justify-center" />
</template>
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 }}
  • #{{ item.slot }}-leading
  • #{{ item.slot }}-label
  • #{{ item.slot }}-trailing
<script setup lang="ts">
const items = [
  {
    label: 'Guide',
    icon: 'i-heroicons-book-open'

  },
  {
    label: 'Composables',
    icon: 'i-heroicons-circle-stack'

  },
  {
    label: 'Components',
    icon: 'i-heroicons-cube-transparent',
    slot: 'components'
  }
]
</script>

<template>
  <UNavigationMenu :items="items" class="justify-center">
    <template #components-trailing>
      <UBadge label="44" variant="subtle" size="sm" />
    </template>
  </UNavigationMenu>
</template>
You can also use the #item, #item-leading, #item-label and #item-trailing slots to customize all items.

API

Props

Prop Default Type
as

div

any

The element or component this component should render as.

trailingIcon

appConfig.ui.icons.chevronDown

string

The icon displayed to open the menu.

items

NavigationMenuItem[] | NavigationMenuItem[][]

color

primary

"error" | "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "gray"

variant

pill

"link" | "pill"

orientation

"horizontal"

"horizontal" | "vertical"

The orientation of the menu.

highlight

boolean

Display a line next to the active item.

highlightColor

primary

"error" | "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "gray"

content

Omit<NavigationMenuContentProps, "asChild" | "as" | "forceMount">

The content of the menu.

arrow

false

boolean

Display an arrow alongside the menu.

defaultValue

string

The value of the menu item that should be active when initially rendered.

Use when you do not need to control the value state.

modelValue

string

The controlled value of the menu item to activate. Can be used as v-model.

delayDuration

0

number

The duration from when the pointer enters the trigger until the tooltip gets opened.

disableClickTrigger

false

boolean

If true, menu cannot be open by click on trigger

disableHoverTrigger

false

boolean

If true, menu cannot be open by hover on trigger

skipDelayDuration

300

number

How much time a user has to enter another trigger without incurring a delay again.

ui

Partial<{ root: string; list: string; item: string; link: string; linkLeadingIcon: string; linkLeadingAvatar: string; linkLeadingAvatarSize: string; linkTrailing: string; linkTrailingBadge: string; ... 17 more ...; arrow: string; }>

Slots

Slot Type
item

{ item: NavigationMenuItem; index: number; active?: boolean | undefined; }

item-leading

{ item: NavigationMenuItem; index: number; active?: boolean | undefined; }

item-label

{ item: NavigationMenuItem; index: number; active?: boolean | undefined; }

item-trailing

{ item: NavigationMenuItem; index: number; active?: boolean | undefined; }

Emits

Event Type
update:modelValue

[value: string]

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    navigationMenu: {
      slots: {
        root: 'relative flex gap-1.5',
        list: 'isolate min-w-0',
        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',
        linkTrailing: 'ms-auto inline-flex',
        linkTrailingBadge: 'shrink-0 rounded',
        linkTrailingBadgeSize: 'sm',
        linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
        linkLabel: 'truncate',
        linkLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500',
        childList: 'grid grid-cols-2 gap-2 p-2',
        childItem: '',
        childLink: 'group size-full px-3 py-2 rounded-md flex items-start gap-2 text-left',
        childLinkWrapper: 'flex flex-col items-start',
        childLinkIcon: 'size-5 shrink-0',
        childLinkLabel: 'font-semibold text-sm relative inline-flex',
        childLinkLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500',
        childLinkDescription: 'text-sm text-gray-500 dark:text-gray-400',
        separator: 'px-2 h-px bg-gray-200 dark:bg-gray-800',
        viewportWrapper: 'absolute top-full inset-x-0 flex w-full',
        viewport: 'relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 h-[--radix-navigation-menu-viewport-height] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
        content: 'absolute top-0 left-0 w-full 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]',
        indicator: 'data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out',
        arrow: 'relative top-[50%] size-2.5 rotate-45 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 z-[1] rounded-sm'
      },
      variants: {
        color: {
          primary: {
            link: 'focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400',
            childLink: 'focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400'
          },
          error: {
            link: 'focus-visible:before:ring-error-500 dark:focus-visible:before:ring-error-400',
            childLink: 'focus-visible:outline-error-500 dark:focus-visible:outline-error-400'
          },
          red: {
            link: 'focus-visible:before:ring-red-500 dark:focus-visible:before:ring-red-400',
            childLink: 'focus-visible:outline-red-500 dark:focus-visible:outline-red-400'
          },
          orange: {
            link: 'focus-visible:before:ring-orange-500 dark:focus-visible:before:ring-orange-400',
            childLink: 'focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400'
          },
          amber: {
            link: 'focus-visible:before:ring-amber-500 dark:focus-visible:before:ring-amber-400',
            childLink: 'focus-visible:outline-amber-500 dark:focus-visible:outline-amber-400'
          },
          yellow: {
            link: 'focus-visible:before:ring-yellow-500 dark:focus-visible:before:ring-yellow-400',
            childLink: 'focus-visible:outline-yellow-500 dark:focus-visible:outline-yellow-400'
          },
          lime: {
            link: 'focus-visible:before:ring-lime-500 dark:focus-visible:before:ring-lime-400',
            childLink: 'focus-visible:outline-lime-500 dark:focus-visible:outline-lime-400'
          },
          green: {
            link: 'focus-visible:before:ring-green-500 dark:focus-visible:before:ring-green-400',
            childLink: 'focus-visible:outline-green-500 dark:focus-visible:outline-green-400'
          },
          emerald: {
            link: 'focus-visible:before:ring-emerald-500 dark:focus-visible:before:ring-emerald-400',
            childLink: 'focus-visible:outline-emerald-500 dark:focus-visible:outline-emerald-400'
          },
          teal: {
            link: 'focus-visible:before:ring-teal-500 dark:focus-visible:before:ring-teal-400',
            childLink: 'focus-visible:outline-teal-500 dark:focus-visible:outline-teal-400'
          },
          cyan: {
            link: 'focus-visible:before:ring-cyan-500 dark:focus-visible:before:ring-cyan-400',
            childLink: 'focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400'
          },
          sky: {
            link: 'focus-visible:before:ring-sky-500 dark:focus-visible:before:ring-sky-400',
            childLink: 'focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400'
          },
          blue: {
            link: 'focus-visible:before:ring-blue-500 dark:focus-visible:before:ring-blue-400',
            childLink: 'focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400'
          },
          indigo: {
            link: 'focus-visible:before:ring-indigo-500 dark:focus-visible:before:ring-indigo-400',
            childLink: 'focus-visible:outline-indigo-500 dark:focus-visible:outline-indigo-400'
          },
          violet: {
            link: 'focus-visible:before:ring-violet-500 dark:focus-visible:before:ring-violet-400',
            childLink: 'focus-visible:outline-violet-500 dark:focus-visible:outline-violet-400'
          },
          purple: {
            link: 'focus-visible:before:ring-purple-500 dark:focus-visible:before:ring-purple-400',
            childLink: 'focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400'
          },
          fuchsia: {
            link: 'focus-visible:before:ring-fuchsia-500 dark:focus-visible:before:ring-fuchsia-400',
            childLink: 'focus-visible:outline-fuchsia-500 dark:focus-visible:outline-fuchsia-400'
          },
          pink: {
            link: 'focus-visible:before:ring-pink-500 dark:focus-visible:before:ring-pink-400',
            childLink: 'focus-visible:outline-pink-500 dark:focus-visible:outline-pink-400'
          },
          rose: {
            link: 'focus-visible:before:ring-rose-500 dark:focus-visible:before:ring-rose-400',
            childLink: 'focus-visible:outline-rose-500 dark:focus-visible:outline-rose-400'
          },
          gray: {
            link: 'focus-visible:before:ring-gray-900 dark:focus-visible:before:ring-white',
            childLink: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
          }
        },
        highlightColor: {
          primary: '',
          error: '',
          red: '',
          orange: '',
          amber: '',
          yellow: '',
          lime: '',
          green: '',
          emerald: '',
          teal: '',
          cyan: '',
          sky: '',
          blue: '',
          indigo: '',
          violet: '',
          purple: '',
          fuchsia: '',
          pink: '',
          rose: '',
          gray: ''
        },
        variant: {
          pill: '',
          link: ''
        },
        orientation: {
          horizontal: {
            root: 'w-full 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'
          },
          vertical: {
            root: 'flex-col',
            link: 'px-2.5 py-1.5 before:inset-y-px before:inset-x-0'
          }
        },
        active: {
          true: {
            childLink: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
            childLinkIcon: 'text-gray-700 dark:text-gray-200'
          },
          false: {
            link: 'text-gray-500 dark:text-gray-400',
            linkLeadingIcon: 'text-gray-400 dark:text-gray-500',
            childLink: [
              'hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white',
              'transition-colors'
            ],
            childLinkIcon: [
              'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200',
              'transition-colors'
            ]
          }
        },
        disabled: {
          true: {
            link: 'cursor-not-allowed opacity-75'
          }
        },
        highlight: {
          true: ''
        }
      },
      compoundVariants: [
        {
          highlight: true,
          orientation: 'horizontal',
          class: {
            item: '-mb-px',
            link: 'after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full'
          }
        },
        {
          highlight: true,
          orientation: 'vertical',
          class: {
            item: 'px-1.5 -ml-px',
            link: 'after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full'
          }
        },
        {
          disabled: false,
          active: false,
          variant: 'pill',
          class: {
            link: [
              'hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50',
              'transition-colors before:transition-colors'
            ],
            linkLeadingIcon: [
              'group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200',
              'transition-colors'
            ]
          }
        },
        {
          color: 'primary',
          variant: 'pill',
          active: true,
          class: {
            link: 'text-primary-500 dark:text-primary-400',
            linkLeadingIcon: 'text-primary-500 dark:text-primary-400'
          }
        },
        {
          color: 'gray',
          variant: 'pill',
          active: true,
          class: {
            link: 'text-gray-900 dark:text-white',
            linkLeadingIcon: 'text-gray-900 dark:text-white'
          }
        },
        {
          variant: 'pill',
          active: true,
          highlight: false,
          class: {
            link: 'before:bg-gray-100 dark:before:bg-gray-800'
          }
        },
        {
          variant: 'pill',
          active: true,
          highlight: true,
          class: {
            link: [
              'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
              'before:transition-colors'
            ]
          }
        },
        {
          disabled: false,
          active: false,
          variant: 'link',
          class: {
            link: [
              'hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white',
              'transition-colors'
            ],
            linkLeadingIcon: [
              'group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200',
              'transition-colors'
            ]
          }
        },
        {
          color: 'primary',
          variant: 'link',
          active: true,
          class: {
            link: 'text-primary-500 dark:text-primary-400',
            linkLeadingIcon: 'text-primary-500 dark:text-primary-400'
          }
        },
        {
          color: 'gray',
          variant: 'link',
          active: true,
          class: {
            link: 'text-gray-900 dark:text-white',
            linkLeadingIcon: 'text-gray-900 dark:text-white'
          }
        },
        {
          highlightColor: 'primary',
          highlight: true,
          active: true,
          class: {
            link: 'after:bg-primary-500 dark:after:bg-primary-400'
          }
        },
        {
          highlightColor: 'gray',
          highlight: true,
          active: true,
          class: {
            link: 'after:bg-gray-900 dark:after:bg-white'
          }
        }
      ],
      defaultVariants: {
        color: 'primary',
        highlightColor: 'primary',
        variant: 'pill'
      }
    }
  }
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Modal

A dialog window that can be used to display a message or request user input.

Pagination

A list of buttons or links to navigate through pages.