NavigationMenu

AkarGitHub
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.

<script setup lang="ts">
const items = ref([
  {
    label: 'Guide',
    icon: 'i-lucide:book-open',
    to: '/docs/pohon/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 Pohon 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` / `pohon` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-lucide:database',
    to: '/docs/pohon/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-lucide:file-text',
        description: 'Define shortcuts for your application.',
        to: '/docs/pohon/composables/define-shortcuts'
      },
      {
        label: 'useOverlay',
        icon: 'i-lucide:file-text',
        description: 'Display a modal/slideover within your application.',
        to: '/docs/pohon/composables/use-overlay'
      },
      {
        label: 'useToast',
        icon: 'i-lucide:file-text',
        description: 'Display a toast within your application.',
        to: '/docs/pohon/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    to: '/docs/pohon/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-lucide:file-text',
        description: 'Use NuxtLink with superpowers.',
        to: '/docs/pohon/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-lucide:file-text',
        description: 'Display a modal within your application.',
        to: '/docs/pohon/components/dialog'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-lucide:file-text',
        description: 'Display a list of links.',
        to: '/docs/pohon/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-lucide:file-text',
        description: 'Display a list of pages.',
        to: '/docs/pohon/components/pagination'
      },
      {
        label: 'Popover',
        icon: 'i-lucide:file-text',
        description: 'Display a non-modal dialog that floats around a trigger element.',
        to: '/docs/pohon/components/popover'
      },
      {
        label: 'Progress',
        icon: 'i-lucide:file-text',
        description: 'Show a horizontal bar to indicate task progression.',
        to: '/docs/pohon/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
  }
])
</script>

<template>
  <PNavigationMenu :items="items" />
</template>

Items

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

  • label?: string
  • icon?: string
  • avatar?: AvatarProps
  • badge?: string | number | BadgeProps
  • tooltip?: TooltipProps
  • trailingIcon?: string
  • type?: 'label' | 'trigger' | 'link'
  • defaultOpen?: boolean
  • open?: boolean
  • value?: string
  • disabled?: boolean
  • slot?: string
  • onSelect?: (e: Event) => void
  • children?: NavigationMenuChildItem[]
  • class?: any
  • pohon?: { 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 }

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

<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[]>([
  {
    label: 'Guide',
    icon: 'i-lucide:book-open',
    to: '/docs/pohon/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 Pohon 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` / `pohon` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-lucide:database',
    to: '/docs/pohon/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-lucide:file-text',
        description: 'Define shortcuts for your application.',
        to: '/docs/pohon/composables/define-shortcuts'
      },
      {
        label: 'useOverlay',
        icon: 'i-lucide:file-text',
        description: 'Display a modal/slideover within your application.',
        to: '/docs/pohon/composables/use-overlay'
      },
      {
        label: 'useToast',
        icon: 'i-lucide:file-text',
        description: 'Display a toast within your application.',
        to: '/docs/pohon/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    to: '/docs/pohon/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-lucide:file-text',
        description: 'Use NuxtLink with superpowers.',
        to: '/docs/pohon/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-lucide:file-text',
        description: 'Display a modal within your application.',
        to: '/docs/pohon/components/dialog'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-lucide:file-text',
        description: 'Display a list of links.',
        to: '/docs/pohon/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-lucide:file-text',
        description: 'Display a list of pages.',
        to: '/docs/pohon/components/pagination'
      },
      {
        label: 'Popover',
        icon: 'i-lucide:file-text',
        description: 'Display a non-modal dialog that floats around a trigger element.',
        to: '/docs/pohon/components/popover'
      },
      {
        label: 'Progress',
        icon: 'i-lucide:file-text',
        description: 'Show a horizontal bar to indicate task progression.',
        to: '/docs/pohon/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
  }
])
</script>

<template>
  <PNavigationMenu :items="items" class="w-full akar:justify-center" />
</template>
You can also 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
  • onSelect?: (e: Event) => void
  • class?: any

Orientation

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

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.
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[][]>([
  [
    {
      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 Pohon 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` / `pohon` 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: '/docs/pohon/composables/define-shortcuts'
        },
        {
          label: 'useOverlay',
          icon: 'i-lucide:file-text',
          description: 'Display a modal/slideover within your application.',
          to: '/docs/pohon/composables/use-overlay'
        },
        {
          label: 'useToast',
          icon: 'i-lucide:file-text',
          description: 'Display a toast within your application.',
          to: '/docs/pohon/composables/use-toast'
        }
      ]
    },
    {
      label: 'Components',
      icon: 'i-lucide:box',
      to: '/docs/pohon/components',
      active: true,
      defaultOpen: true,
      children: [
        {
          label: 'Link',
          icon: 'i-lucide:file-text',
          description: 'Use NuxtLink with superpowers.',
          to: '/docs/pohon/components/link'
        },
        {
          label: 'Modal',
          icon: 'i-lucide:file-text',
          description: 'Display a modal within your application.',
          to: '/docs/pohon/components/dialog'
        },
        {
          label: 'NavigationMenu',
          icon: 'i-lucide:file-text',
          description: 'Display a list of links.',
          to: '/docs/pohon/components/navigation-menu'
        },
        {
          label: 'Pagination',
          icon: 'i-lucide:file-text',
          description: 'Display a list of pages.',
          to: '/docs/pohon/components/pagination'
        },
        {
          label: 'Popover',
          icon: 'i-lucide:file-text',
          description: 'Display a non-modal dialog that floats around a trigger element.',
          to: '/docs/pohon/components/popover'
        },
        {
          label: 'Progress',
          icon: 'i-lucide:file-text',
          description: 'Show a horizontal bar to indicate task progression.',
          to: '/docs/pohon/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
    }
  ]
])
</script>

<template>
  <PNavigationMenu orientation="vertical" :items="items" class="data-[orientation=vertical]:w-48" />
</template>
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.

You can use the tooltip and popover props to display more information on the collapsed items.
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[][]>([
  [
    {
      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 Pohon 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` / `pohon` 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: '/docs/pohon/composables/define-shortcuts'
        },
        {
          label: 'useOverlay',
          icon: 'i-lucide:file-text',
          description: 'Display a modal/slideover within your application.',
          to: '/docs/pohon/composables/use-overlay'
        },
        {
          label: 'useToast',
          icon: 'i-lucide:file-text',
          description: 'Display a toast within your application.',
          to: '/docs/pohon/composables/use-toast'
        }
      ]
    },
    {
      label: 'Components',
      icon: 'i-lucide:box',
      to: '/docs/pohon/components',
      active: true,
      children: [
        {
          label: 'Link',
          icon: 'i-lucide:file-text',
          description: 'Use NuxtLink with superpowers.',
          to: '/docs/pohon/components/link'
        },
        {
          label: 'Modal',
          icon: 'i-lucide:file-text',
          description: 'Display a modal within your application.',
          to: '/docs/pohon/components/dialog'
        },
        {
          label: 'NavigationMenu',
          icon: 'i-lucide:file-text',
          description: 'Display a list of links.',
          to: '/docs/pohon/components/navigation-menu'
        },
        {
          label: 'Pagination',
          icon: 'i-lucide:file-text',
          description: 'Display a list of pages.',
          to: '/docs/pohon/components/pagination'
        },
        {
          label: 'Popover',
          icon: 'i-lucide:file-text',
          description: 'Display a non-modal dialog that floats around a trigger element.',
          to: '/docs/pohon/components/popover'
        },
        {
          label: 'Progress',
          icon: 'i-lucide:file-text',
          description: 'Show a horizontal bar to indicate task progression.',
          to: '/docs/pohon/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
    }
  ]
])
</script>

<template>
  <PNavigationMenu collapsed orientation="vertical" :items="items" />
</template>

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">
import type { NavigationMenuItem } from 'pohon-ui'

const items = ref<NavigationMenuItem[][]>([
  [
    {
      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 Pohon 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` / `pohon` 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: '/docs/pohon/composables/define-shortcuts'
        },
        {
          label: 'useOverlay',
          icon: 'i-lucide:file-text',
          description: 'Display a modal/slideover within your application.',
          to: '/docs/pohon/composables/use-overlay'
        },
        {
          label: 'useToast',
          icon: 'i-lucide:file-text',
          description: 'Display a toast within your application.',
          to: '/docs/pohon/composables/use-toast'
        }
      ]
    },
    {
      label: 'Components',
      icon: 'i-lucide:box',
      to: '/docs/pohon/components',
      active: true,
      defaultOpen: true,
      children: [
        {
          label: 'Link',
          icon: 'i-lucide:file-text',
          description: 'Use NuxtLink with superpowers.',
          to: '/docs/pohon/components/link'
        },
        {
          label: 'Modal',
          icon: 'i-lucide:file-text',
          description: 'Display a modal within your application.',
          to: '/docs/pohon/components/dialog'
        },
        {
          label: 'NavigationMenu',
          icon: 'i-lucide:file-text',
          description: 'Display a list of links.',
          to: '/docs/pohon/components/navigation-menu'
        },
        {
          label: 'Pagination',
          icon: 'i-lucide:file-text',
          description: 'Display a list of pages.',
          to: '/docs/pohon/components/pagination'
        },
        {
          label: 'Popover',
          icon: 'i-lucide:file-text',
          description: 'Display a non-modal dialog that floats around a trigger element.',
          to: '/docs/pohon/components/popover'
        },
        {
          label: 'Progress',
          icon: 'i-lucide:file-text',
          description: 'Show a horizontal bar to indicate task progression.',
          to: '/docs/pohon/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
    }
  ]
])
</script>

<template>
  <PNavigationMenu
    highlight
    highlight-color="primary"
    orientation="horizontal"
    :items="items"
    class="data-[orientation=horizontal]:border-b border-border data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48"
  />
</template>
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.
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.

<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[][]>([
  [
    {
      label: 'Guide',
      icon: 'i-lucide:book-open',
      to: '/docs/pohon/getting-started'
    },
    {
      label: 'Composables',
      icon: 'i-lucide:database',
      to: '/docs/pohon/composables'
    },
    {
      label: 'Components',
      icon: 'i-lucide:box',
      to: '/docs/pohon/components',
      active: true
    }
  ],
  [
    {
      label: 'GitHub',
      icon: 'i-simple-icons:github',
      badge: '3.8k',
      to: 'https://github.com/nuxt/ui',
      target: '_blank'
    }
  ]
])
</script>

<template>
  <PNavigationMenu color="neutral" :items="items" class="w-full" />
</template>

Variant

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

<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[][]>([
  [
    {
      label: 'Guide',
      icon: 'i-lucide:book-open',
      to: '/docs/pohon/getting-started'
    },
    {
      label: 'Composables',
      icon: 'i-lucide:database',
      to: '/docs/pohon/composables'
    },
    {
      label: 'Components',
      icon: 'i-lucide:box',
      to: '/docs/pohon/components',
      active: true
    }
  ],
  [
    {
      label: 'GitHub',
      icon: 'i-simple-icons:github',
      badge: '3.8k',
      to: 'https://github.com/nuxt/ui',
      target: '_blank'
    }
  ]
])
</script>

<template>
  <PNavigationMenu color="neutral" variant="link" :items="items" class="w-full" />
</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-lucide:chevron-down. 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">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[]>([
  {
    label: 'Guide',
    icon: 'i-lucide:book-open',
    to: '/docs/pohon/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 Pohon 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` / `pohon` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-lucide:database',
    to: '/docs/pohon/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-lucide:file-text',
        description: 'Define shortcuts for your application.',
        to: '/docs/pohon/composables/define-shortcuts'
      },
      {
        label: 'useOverlay',
        icon: 'i-lucide:file-text',
        description: 'Display a modal/slideover within your application.',
        to: '/docs/pohon/composables/use-overlay'
      },
      {
        label: 'useToast',
        icon: 'i-lucide:file-text',
        description: 'Display a toast within your application.',
        to: '/docs/pohon/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    to: '/docs/pohon/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-lucide:file-text',
        description: 'Use NuxtLink with superpowers.',
        to: '/docs/pohon/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-lucide:file-text',
        description: 'Display a modal within your application.',
        to: '/docs/pohon/components/dialog'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-lucide:file-text',
        description: 'Display a list of links.',
        to: '/docs/pohon/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-lucide:file-text',
        description: 'Display a list of pages.',
        to: '/docs/pohon/components/pagination'
      },
      {
        label: 'Popover',
        icon: 'i-lucide:file-text',
        description: 'Display a non-modal dialog that floats around a trigger element.',
        to: '/docs/pohon/components/popover'
      },
      {
        label: 'Progress',
        icon: 'i-lucide:file-text',
        description: 'Show a horizontal bar to indicate task progression.',
        to: '/docs/pohon/components/progress'
      }
    ]
  }
])
</script>

<template>
  <PNavigationMenu trailing-icon="i-lucide:arrow-down" :items="items" class="w-full akar:justify-center" />
</template>
You can customize this icon globally in your app.config.ts under pohon.icons.chevronDown key.
You can customize this icon globally in your vite.config.ts under pohon.icons.chevronDown key.

Arrow

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

<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[]>([
  {
    label: 'Guide',
    icon: 'i-lucide:book-open',
    to: '/docs/pohon/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 Pohon 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` / `pohon` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-lucide:database',
    to: '/docs/pohon/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-lucide:file-text',
        description: 'Define shortcuts for your application.',
        to: '/docs/pohon/composables/define-shortcuts'
      },
      {
        label: 'useOverlay',
        icon: 'i-lucide:file-text',
        description: 'Display a modal/slideover within your application.',
        to: '/docs/pohon/composables/use-overlay'
      },
      {
        label: 'useToast',
        icon: 'i-lucide:file-text',
        description: 'Display a toast within your application.',
        to: '/docs/pohon/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    to: '/docs/pohon/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-lucide:file-text',
        description: 'Use NuxtLink with superpowers.',
        to: '/docs/pohon/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-lucide:file-text',
        description: 'Display a modal within your application.',
        to: '/docs/pohon/components/dialog'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-lucide:file-text',
        description: 'Display a list of links.',
        to: '/docs/pohon/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-lucide:file-text',
        description: 'Display a list of pages.',
        to: '/docs/pohon/components/pagination'
      },
      {
        label: 'Popover',
        icon: 'i-lucide:file-text',
        description: 'Display a non-modal dialog that floats around a trigger element.',
        to: '/docs/pohon/components/popover'
      },
      {
        label: 'Progress',
        icon: 'i-lucide:file-text',
        description: 'Show a horizontal bar to indicate task progression.',
        to: '/docs/pohon/components/progress'
      }
    ]
  }
])
</script>

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

Content Orientation

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

This prop only works when orientation is horizontal.
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[]>([
  {
    label: 'Guide',
    icon: 'i-lucide:book-open',
    to: '/docs/pohon/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 Pohon 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: '/docs/pohon/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-lucide:file-text',
        description: 'Define shortcuts for your application.',
        to: '/docs/pohon/composables/define-shortcuts'
      },
      {
        label: 'useOverlay',
        icon: 'i-lucide:file-text',
        description: 'Display a modal/slideover within your application.',
        to: '/docs/pohon/composables/use-overlay'
      },
      {
        label: 'useToast',
        icon: 'i-lucide:file-text',
        description: 'Display a toast within your application.',
        to: '/docs/pohon/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    to: '/docs/pohon/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-lucide:file-text',
        description: 'Use NuxtLink with superpowers.',
        to: '/docs/pohon/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-lucide:file-text',
        description: 'Display a modal within your application.',
        to: '/docs/pohon/components/dialog'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-lucide:file-text',
        description: 'Display a list of links.',
        to: '/docs/pohon/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-lucide:file-text',
        description: 'Display a list of pages.',
        to: '/docs/pohon/components/pagination'
      }
    ]
  }
])
</script>

<template>
  <PNavigationMenu arrow content-orientation="vertical" :items="items" class="w-full akar:justify-center" />
</template>

Unmount

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

<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[]>([
  {
    label: 'Guide',
    icon: 'i-lucide:book-open',
    to: '/docs/pohon/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 Pohon 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` / `pohon` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-lucide:database',
    to: '/docs/pohon/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-lucide:file-text',
        description: 'Define shortcuts for your application.',
        to: '/docs/pohon/composables/define-shortcuts'
      },
      {
        label: 'useOverlay',
        icon: 'i-lucide:file-text',
        description: 'Display a modal/slideover within your application.',
        to: '/docs/pohon/composables/use-overlay'
      },
      {
        label: 'useToast',
        icon: 'i-lucide:file-text',
        description: 'Display a toast within your application.',
        to: '/docs/pohon/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    to: '/docs/pohon/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-lucide:file-text',
        description: 'Use NuxtLink with superpowers.',
        to: '/docs/pohon/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-lucide:file-text',
        description: 'Display a modal within your application.',
        to: '/docs/pohon/components/dialog'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-lucide:file-text',
        description: 'Display a list of links.',
        to: '/docs/pohon/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-lucide:file-text',
        description: 'Display a list of pages.',
        to: '/docs/pohon/components/pagination'
      },
      {
        label: 'Popover',
        icon: 'i-lucide:file-text',
        description: 'Display a non-modal dialog that floats around a trigger element.',
        to: '/docs/pohon/components/popover'
      },
      {
        label: 'Progress',
        icon: 'i-lucide:file-text',
        description: 'Show a horizontal bar to indicate task progression.',
        to: '/docs/pohon/components/progress'
      }
    ]
  }
])
</script>

<template>
  <PNavigationMenu :items="items" class="w-full akar:justify-center" />
</template>
You can inspect the DOM to see each item's content being rendered.

Examples

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 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.

<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[][]>([
  [
    {
      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 Pohon 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` / `pohon` 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: '/docs/pohon/composables/define-shortcuts'
        },
        {
          label: 'useOverlay',
          icon: 'i-lucide:file-text',
          description: 'Display a modal/slideover within your application.',
          to: '/docs/pohon/composables/use-overlay'
        },
        {
          label: 'useToast',
          icon: 'i-lucide:file-text',
          description: 'Display a toast within your application.',
          to: '/docs/pohon/composables/use-toast'
        }
      ]
    },
    {
      label: 'Components',
      icon: 'i-lucide:box',
      to: '/docs/pohon/components',
      active: true,
      children: [
        {
          label: 'Link',
          icon: 'i-lucide:file-text',
          description: 'Use NuxtLink with superpowers.',
          to: '/docs/pohon/components/link'
        },
        {
          label: 'Modal',
          icon: 'i-lucide:file-text',
          description: 'Display a modal within your application.',
          to: '/docs/pohon/components/dialog'
        },
        {
          label: 'NavigationMenu',
          icon: 'i-lucide:file-text',
          description: 'Display a list of links.',
          to: '/docs/pohon/components/navigation-menu'
        },
        {
          label: 'Pagination',
          icon: 'i-lucide:file-text',
          description: 'Display a list of pages.',
          to: '/docs/pohon/components/pagination'
        },
        {
          label: 'Popover',
          icon: 'i-lucide:file-text',
          description: 'Display a non-modal dialog that floats around a trigger element.',
          to: '/docs/pohon/components/popover'
        },
        {
          label: 'Progress',
          icon: 'i-lucide:file-text',
          description: 'Show a horizontal bar to indicate task progression.',
          to: '/docs/pohon/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
    }
  ]
])
</script>

<template>
  <PNavigationMenu tooltip collapsed orientation="vertical" :items="items" />
</template>

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 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.

<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'


const items = ref<NavigationMenuItem[][]>([
  [
    {
      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 Pohon 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` / `pohon` 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: '/docs/pohon/composables/define-shortcuts'
        },
        {
          label: 'useOverlay',
          icon: 'i-lucide:file-text',
          description: 'Display a modal/slideover within your application.',
          to: '/docs/pohon/composables/use-overlay'
        },
        {
          label: 'useToast',
          icon: 'i-lucide:file-text',
          description: 'Display a toast within your application.',
          to: '/docs/pohon/composables/use-toast'
        }
      ]
    },
    {
      label: 'Components',
      icon: 'i-lucide:box',
      to: '/docs/pohon/components',
      active: true,
      children: [
        {
          label: 'Link',
          icon: 'i-lucide:file-text',
          description: 'Use NuxtLink with superpowers.',
          to: '/docs/pohon/components/link'
        },
        {
          label: 'Modal',
          icon: 'i-lucide:file-text',
          description: 'Display a modal within your application.',
          to: '/docs/pohon/components/dialog'
        },
        {
          label: 'NavigationMenu',
          icon: 'i-lucide:file-text',
          description: 'Display a list of links.',
          to: '/docs/pohon/components/navigation-menu'
        },
        {
          label: 'Pagination',
          icon: 'i-lucide:file-text',
          description: 'Display a list of pages.',
          to: '/docs/pohon/components/pagination'
        },
        {
          label: 'Popover',
          icon: 'i-lucide:file-text',
          description: 'Display a non-modal dialog that floats around a trigger element.',
          to: '/docs/pohon/components/popover'
        },
        {
          label: 'Progress',
          icon: 'i-lucide:file-text',
          description: 'Show a horizontal bar to indicate task progression.',
          to: '/docs/pohon/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
    }
  ]
])
</script>

<template>
  <PNavigationMenu popover collapsed orientation="vertical" :items="items" />
</template>
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 value of the item. If no value is provided, it defaults to the index as a string.

<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui';
import { defineShortcuts } from '#imports';
import { ref } from 'vue';

const items: Array<PNavigationMenuItem> = [
  {
    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 Pohon 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` / `pohon` 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.',
      },
      {
        label: 'useOverlay',
        icon: 'i-lucide:file-text',
        description: 'Display a modal/slideover within your application.',
      },
      {
        label: 'useToast',
        icon: 'i-lucide:file-text',
        description: 'Display a toast within your application.',
      },
    ],
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    children: [
      {
        label: 'Link',
        icon: 'i-lucide:file-text',
        description: 'Use NuxtLink with superpowers.',
      },
      {
        label: 'Modal',
        icon: 'i-lucide:file-text',
        description: 'Display a modal within your application.',
      },
      {
        label: 'NavigationMenu',
        icon: 'i-lucide:file-text',
        description: 'Display a list of links.',
      },
      {
        label: 'Pagination',
        icon: 'i-lucide:file-text',
        description: 'Display a list of pages.',
      },
      {
        label: 'Popover',
        icon: 'i-lucide:file-text',
        description: 'Display a non-modal dialog that floats around a trigger element.',
      },
      {
        label: 'Progress',
        icon: 'i-lucide:file-text',
        description: 'Show a horizontal bar to indicate task progression.',
      },
    ],
  },
];

const active = ref();

defineShortcuts({
  1: () => {
    active.value = 'item-0';
  },
  2: () => {
    active.value = 'item-1';
  },
  3: () => {
    active.value = 'item-2';
  },
});
</script>

<template>
  <PNavigationMenu
    v-model="active"
    :items="items"
    class="w-full akar:justify-center"
  />
</template>
In this example, leveraging defineShortcuts, you can switch the active item by pressing 1, 2, or 3.

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
<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui';

const items = [
  {
    label: 'Guide',
    icon: 'i-lucide:book-open',
  },
  {
    label: 'Composables',
    icon: 'i-lucide:database',
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    slot: 'components' as const,
  },
] satisfies Array<PNavigationMenuItem>;
</script>

<template>
  <PNavigationMenu
    :items="items"
    class="w-full akar:justify-center"
  >
    <template #components-trailing>
      <PBadge
        label="44"
        variant="subtle"
        size="sm"
      />
    </template>
  </PNavigationMenu>
</template>
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.

<script setup lang="ts">
import type { PNavigationMenuItem } from 'pohon-ui';

const items = [
  {
    label: 'Docs',
    icon: 'i-lucide:book-open',
    slot: 'docs' as const,
    children: [
      {
        label: 'Icons',
        description: 'You have nothing to do, @nuxt/icon will handle it automatically.',
      },
      {
        label: 'Colors',
        description: 'Choose a primary and a neutral color from your Tailwind CSS theme.',
      },
      {
        label: 'Theme',
        description: 'You can customize components by using the `class` / `pohon` props or in your app.config.ts.',
      },
    ],
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    slot: 'components' as const,
    children: [
      {
        label: 'Link',
        description: 'Use NuxtLink with superpowers.',
      },
      {
        label: 'Modal',
        description: 'Display a modal within your application.',
      },
      {
        label: 'NavigationMenu',
        description: 'Display a list of links.',
      },
      {
        label: 'Pagination',
        description: 'Display a list of pages.',
      },
      {
        label: 'Popover',
        description: 'Display a non-modal dialog that floats around a trigger element.',
      },
      {
        label: 'Progress',
        description: 'Show a horizontal bar to indicate task progression.',
      },
    ],
  },
  {
    label: 'GitHub',
    icon: 'i-simple-icons:github',
  },
] satisfies Array<PNavigationMenuItem>;
</script>

<template>
  <PNavigationMenu
    :items="items"
    :pohon="{
      viewport: 'sm:w-(--akar-navigation-menu-viewport-width)',
      content: 'sm:w-auto',
      childList: 'sm:w-96',
      childLinkDescription: 'text-balance line-clamp-2',
    }"
    class="w-full akar:justify-center"
  >
    <template #docs-content="{ item }">
      <ul class="p-4 gap-2 grid lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)] lg:w-[500px]">
        <li class="row-span-3">
          <CorePlaceholder class="size-full min-h-48" />
        </li>

        <li
          v-for="child in item.children"
          :key="child.label"
        >
          <PLink class="hover:bg-elevated/50 text-sm p-3 text-left rounded-md transition-colors">
            <p class="text-highlighted font-medium">
              {{ child.label }}
            </p>
            <p class="color-text-muted line-clamp-2">
              {{ child.description }}
            </p>
          </PLink>
        </li>
      </ul>
    </template>
  </PNavigationMenu>
</template>
In this example, we add the sm:w-(--akar-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

Prop Default Type

Emits

Event Type

Slots

Slot Type

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PNavigationMenu. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    navigationMenu: {
      slots: {
        root: '',
        list: '',
        label: '',
        item: '',
        link: '',
        linkLeadingIcon: '',
        linkLeadingAvatar: '',
        linkLeadingAvatarSize: '',
        linkTrailing: '',
        linkTrailingBadge: '',
        linkTrailingBadgeSize: '',
        linkTrailingIcon: '',
        linkLabel: '',
        linkLabelExternalIcon: '',
        childList: '',
        childLabel: '',
        childItem: '',
        childLink: '',
        childLinkWrapper: '',
        childLinkIcon: '',
        childLinkLabel: '',
        childLinkLabelExternalIcon: '',
        childLinkDescription: '',
        separator: '',
        viewportWrapper: '',
        viewport: '',
        content: '',
        indicator: '',
        arrow: ''
      },
      variants: {
        color: {
          primary: {
            link: '',
            childLink: ''
          },
          secondary: {
            link: '',
            childLink: ''
          },
          success: {
            link: '',
            childLink: ''
          },
          info: {
            link: '',
            childLink: ''
          },
          warning: {
            link: '',
            childLink: ''
          },
          error: {
            link: '',
            childLink: ''
          },
          neutral: {
            link: '',
            childLink: ''
          }
        },
        highlightColor: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        variant: {
          pill: '',
          link: ''
        },
        orientation: {
          horizontal: {
            root: '',
            list: '',
            item: '',
            link: '',
            childList: '',
            childLink: '',
            childLinkLabel: '',
            content: ''
          },
          vertical: {
            root: '',
            link: '',
            childLabel: '',
            childLink: ''
          }
        },
        contentOrientation: {
          horizontal: {
            viewportWrapper: '',
            content: ''
          },
          vertical: {
            viewport: ''
          }
        },
        active: {
          true: {
            childLink: '',
            childLinkIcon: ''
          },
          false: {
            link: '',
            linkLeadingIcon: '',
            childLink: '',
            childLinkIcon: ''
          }
        },
        disabled: {
          true: {
            link: ''
          }
        },
        highlight: {
          true: ''
        },
        level: {
          true: ''
        },
        collapsed: {
          true: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        color: 'primary',
        highlightColor: 'primary',
        variant: 'pill'
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    navigationMenu: {
      slots: {
        root: '',
        list: '',
        label: '',
        item: '',
        link: '',
        linkLeadingIcon: '',
        linkLeadingAvatar: '',
        linkLeadingAvatarSize: '',
        linkTrailing: '',
        linkTrailingBadge: '',
        linkTrailingBadgeSize: '',
        linkTrailingIcon: '',
        linkLabel: '',
        linkLabelExternalIcon: '',
        childList: '',
        childLabel: '',
        childItem: '',
        childLink: '',
        childLinkWrapper: '',
        childLinkIcon: '',
        childLinkLabel: '',
        childLinkLabelExternalIcon: '',
        childLinkDescription: '',
        separator: '',
        viewportWrapper: '',
        viewport: '',
        content: '',
        indicator: '',
        arrow: ''
      },
      variants: {
        color: {
          primary: {
            link: '',
            childLink: ''
          },
          secondary: {
            link: '',
            childLink: ''
          },
          success: {
            link: '',
            childLink: ''
          },
          info: {
            link: '',
            childLink: ''
          },
          warning: {
            link: '',
            childLink: ''
          },
          error: {
            link: '',
            childLink: ''
          },
          neutral: {
            link: '',
            childLink: ''
          }
        },
        highlightColor: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        variant: {
          pill: '',
          link: ''
        },
        orientation: {
          horizontal: {
            root: '',
            list: '',
            item: '',
            link: '',
            childList: '',
            childLink: '',
            childLinkLabel: '',
            content: ''
          },
          vertical: {
            root: '',
            link: '',
            childLabel: '',
            childLink: ''
          }
        },
        contentOrientation: {
          horizontal: {
            viewportWrapper: '',
            content: ''
          },
          vertical: {
            viewport: ''
          }
        },
        active: {
          true: {
            childLink: '',
            childLinkIcon: ''
          },
          false: {
            link: '',
            linkLeadingIcon: '',
            childLink: '',
            childLinkIcon: ''
          }
        },
        disabled: {
          true: {
            link: ''
          }
        },
        highlight: {
          true: ''
        },
        level: {
          true: ''
        },
        collapsed: {
          true: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        color: 'primary',
        highlightColor: 'primary',
        variant: 'pill'
      }
    }
  }
};

Anatomy

Here is the anatomy of themeable parts of the Navigation Menu component:

Coming soon...

Akar

With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.

If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.

Changelog

No recent changes

Link

A wrapper around <NuxtLink> with extra props.

Pagination

A list of buttons or links to navigate through pages.