NavigationMenu
A list of links that can be displayed horizontally or vertically.
Usage
Use the NavigationMenu component to display a list of links horizontally or vertically.
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
])
</script>
<template>
<PNavigationMenu :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
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?: stringicon?: stringavatar?: AvatarPropsbadge?: string | number | BadgePropschip?: boolean | ChipPropstooltip?: TooltipPropspopover?: PopoverPropstrailingIcon?: stringtype?: 'label' | 'trigger' | 'link'defaultOpen?: booleanopen?: booleanvalue?: stringdisabled?: booleanslot?: stringonSelect?: (e: Event) => voidchildren?: NavigationMenuChildItem[]class?: anyui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingChipSize?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }
You can pass any property from the Link 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: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
])
</script>
<template>
<PNavigationMenu :items="items" class="w-full justify-center" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
])
</script>
<template>
<PNavigationMenu :items="items" class="w-full 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: stringdescription?: stringicon?: stringonSelect?: (e: Event) => voidclass?: 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.When orientation is
vertical and the menu is not collapsed, children are rendered recursively as items, so ui.link styles them. ui.childLink only applies to the content displayed in horizontal orientation and to the popover when collapsed.<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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
type: 'trigger',
active: true,
defaultOpen: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
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><script setup lang="ts">
import { ref } from 'vue'
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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
type: 'trigger',
active: true,
defaultOpen: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
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.
<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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<PNavigationMenu collapsed orientation="vertical" :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description:
'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
defaultOpen: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
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><script setup lang="ts">
import { ref } from 'vue'
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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description:
'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
defaultOpen: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
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: '/pohon/getting-started'
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank'
}
]
])
</script>
<template>
<PNavigationMenu color="neutral" :items="items" class="w-full" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[][]>([
[
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/pohon/getting-started'
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
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: '/pohon/getting-started'
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank'
}
]
])
</script>
<template>
<PNavigationMenu color="neutral" variant="link" :items="items" class="w-full" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[][]>([
[
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/pohon/getting-started'
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
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: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
])
</script>
<template>
<PNavigationMenu trailing-icon="i-lucide-arrow-down" :items="items" class="w-full justify-center" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
])
</script>
<template>
<PNavigationMenu trailing-icon="i-lucide-arrow-down" :items="items" class="w-full justify-center" />
</template>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: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
])
</script>
<template>
<PNavigationMenu arrow :items="items" class="w-full justify-center" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
])
</script>
<template>
<PNavigationMenu arrow :items="items" class="w-full 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: '/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: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
}
]
}
])
</script>
<template>
<PNavigationMenu arrow content-orientation="vertical" :items="items" class="w-full justify-center" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/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: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
}
]
}
])
</script>
<template>
<PNavigationMenu arrow content-orientation="vertical" :items="items" class="w-full justify-center" />
</template>Viewport
Use the viewport prop to control how the NavigationMenu viewport is rendered, like its align for example.
This prop only works when
orientation is horizontal and content-orientation is vertical.<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/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: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
}
]
}
])
</script>
<template>
<PNavigationMenu
:viewport="{
align: 'start'
}"
arrow
content-orientation="vertical"
:items="items"
class="w-full justify-center"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/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: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
}
]
}
])
</script>
<template>
<PNavigationMenu
:viewport="{
align: 'start'
}"
arrow
content-orientation="vertical"
:items="items"
class="w-full 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: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
])
</script>
<template>
<PNavigationMenu :items="items" class="w-full justify-center" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
])
</script>
<template>
<PNavigationMenu :items="items" class="w-full justify-center" />
</template>You can inspect the DOM to see each item's content being rendered.
Examples
Control active item
You can control the active item(s) by using the default-value prop or the v-model directive with the value of the item. If no value is provided, it defaults to item-${index} for top-level items or item-${level}-${index} for nested items.
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui';
const items: Array<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 UnoCSS theme.',
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.',
},
],
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
},
{
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 justify-center"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui';
const items: Array<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 UnoCSS theme.',
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.',
},
],
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
},
{
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 justify-center"
/>
</template>
Use the
value-key prop to change the key used to match items when a v-model or default-value is provided.In this example, leveraging
defineShortcuts, you can switch the active item by pressing 1, 2, or 3.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. In horizontal orientation, you can use the tooltip property on each item to display a Tooltip around items.
The
tooltip property on an item will always display a tooltip regardless of the global tooltip prop.You can pass any property from the Tooltip 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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank',
tooltip: {
text: 'Open on GitHub',
kbds: [
'6k'
]
}
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<PNavigationMenu tooltip collapsed orientation="vertical" :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank',
tooltip: {
text: 'Open on GitHub',
kbds: [
'6k'
]
}
},
{
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.
The
popover property on an item will always display a popover regardless of the global popover prop.You can pass any property from the Popover 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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
popover: {
mode: 'click'
},
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank',
tooltip: {
text: 'Open on GitHub',
kbds: [
'6k'
]
}
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<PNavigationMenu popover collapsed orientation="vertical" :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
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 UnoCSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
popover: {
mode: 'click'
},
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/pohon/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/pohon/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/pohon/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/pohon/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/pohon/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/pohon/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/pohon/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/pohon/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/pohon/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/vinicunca/pohon',
target: '_blank',
tooltip: {
text: 'Open on GitHub',
kbds: [
'6k'
]
}
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<PNavigationMenu popover collapsed orientation="vertical" :items="items" />
</template>With chip in items
Use the chip property to display a Chip around the icon of the items, you can pass any of its props.
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[][]>([
[
{
label: 'Guide',
icon: 'i-lucide-book-open',
chip: {
color: 'error'
}
},
{
label: 'Composables',
icon: 'i-lucide-database',
chip: {
color: 'info',
text: 3
}
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
chip: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/vinicunca/pohon',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<PNavigationMenu collapsed orientation="vertical" :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from 'pohon-ui'
const items = ref<NavigationMenuItem[][]>([
[
{
label: 'Guide',
icon: 'i-lucide-book-open',
chip: {
color: 'error'
}
},
{
label: 'Composables',
icon: 'i-lucide-database',
chip: {
color: 'info',
text: 3
}
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
active: true,
chip: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/vinicunca/pohon',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<PNavigationMenu collapsed orientation="vertical" :items="items" />
</template>With bottom tab bar
Use the ui prop to transform the NavigationMenu into a mobile-style bottom tab bar with icons and small labels, similar to YouTube or Instagram.
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui';
const items: Array<NavigationMenuItem> = [
{
label: 'Home',
icon: 'i-lucide-house',
active: true,
},
{
label: 'Samples',
icon: 'i-lucide-circle-play',
},
{
label: 'Explore',
icon: 'i-lucide-compass',
},
{
label: 'Library',
icon: 'i-lucide-bookmark',
},
];
</script>
<template>
<PNavigationMenu
:items="items"
:ui="{
root: 'justify-around border-t border-border py-2',
item: 'py-0',
link: 'flex-col gap-1 px-3',
linkLeadingIcon: 'size-5',
linkLabel: 'text-[10px]/3 font-normal',
}"
class="w-full"
/>
</template>
With collapsed labels
Use the ui prop to display a label underneath each icon when collapsed.
<script setup lang="ts">
import type { NavigationMenuItem } from 'pohon-ui';
const items: Array<NavigationMenuItem> = [
{
label: 'Home',
icon: 'i-lucide-house',
},
{
label: 'Search',
icon: 'i-lucide-search',
},
{
label: 'Users',
icon: 'i-lucide-users',
active: true,
},
{
label: 'Settings',
icon: 'i-lucide-cog',
},
];
</script>
<template>
<PNavigationMenu
collapsed
orientation="vertical"
:items="items"
:ui="{
link: 'flex-col gap-1',
linkLabel: 'block text-[10px]/3 text-center',
}"
/>
</template>
You can also do this globally through the
app.config.ts using compoundVariants:app/app.config.ts
export default defineAppConfig({
ui: {
navigationMenu: {
compoundVariants: [{
orientation: 'vertical',
collapsed: true,
class: {
link: 'flex-col',
linkLabel: 'block text-[10px]/3 text-center'
}
}]
}
}
});
With custom slot
Use the slot property to customize a specific item.
You will have access to the following slots:
#{{ item.slot }}#{{ item.slot }}-leading#{{ item.slot }}-label#{{ item.slot }}-trailing#{{ item.slot }}-content
<script setup lang="ts">
import type { DropdownMenuItem, NavigationMenuItem } from 'pohon-ui';
const items = [
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/pohon/getting-started',
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
class: 'hidden',
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
class: 'hidden',
},
{
slot: 'more' as const,
as: 'span',
class: 'p-0',
content: {
align: 'start' as const,
},
items: [
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/pohon/composables/define-shortcuts',
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/pohon/components',
},
] satisfies Array<DropdownMenuItem>,
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/vinicunca/pohon',
target: '_blank',
slot: 'github' as const,
},
] satisfies Array<NavigationMenuItem>;
</script>
<template>
<PNavigationMenu
:items="items"
class="w-full justify-center"
>
<template #more="{ item }">
<PDropdownMenu
:content="item.content"
:items="item.items"
>
<PButton
icon="i-lucide-ellipsis"
color="neutral"
variant="link"
/>
</PDropdownMenu>
</template>
<template #github-trailing>
<PBadge
label="6k+"
color="neutral"
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 trailing slot
Use the #item-trailing slot or the slot property (#{{ item.slot }}-trailing) to add a DropdownMenu that appears on hover, similar to Notion or Linear.
<script setup lang="ts">
import type { DropdownMenuItem, NavigationMenuItem } from 'pohon-ui';
const items: Array<Array<NavigationMenuItem>> = [
[
{
label: 'Personal',
type: 'label',
slot: 'personal-label' as const,
},
{
label: 'Design System',
icon: 'i-lucide-folder',
active: true,
},
{
label: 'Travel',
icon: 'i-lucide-folder',
},
],
[
{
label: 'Teams',
type: 'label',
slot: 'teams-label' as const,
},
{
label: 'Engineering',
icon: 'i-lucide-folder',
},
{
label: 'Marketing',
icon: 'i-lucide-folder',
},
],
];
const dropdownItems: Array<Array<DropdownMenuItem>> = [
[
{ label: 'View Project', icon: 'i-lucide-folder-open' },
{ label: 'Share Project', icon: 'i-lucide-share' },
],
[
{ label: 'Delete Project', icon: 'i-lucide-trash', color: 'error' },
],
];
</script>
<template>
<PNavigationMenu
orientation="vertical"
:items="items"
:ui="{ link: 'overflow-hidden has-data-[state=open]:before:bg-background-elevated/50' }"
class="w-48"
>
<template #personal-label-trailing>
<PButton
icon="i-lucide-plus"
color="neutral"
variant="ghost"
size="xs"
/>
</template>
<template #teams-label-trailing>
<PButton
icon="i-lucide-plus"
color="neutral"
variant="ghost"
size="xs"
/>
</template>
<template #item-trailing>
<div class="flex translate-x-full transition-transform -my-0.5 -mr-1.5 group-hover:translate-x-0 has-data-[state=open]:translate-x-0">
<PDropdownMenu
:items="dropdownItems"
:content="{ align: 'start' }"
:modal="false"
size="xs"
>
<PButton
as="div"
icon="i-lucide-ellipsis"
color="neutral"
variant="ghost"
size="xs"
class="color-text-muted mr-1.5 hover:color-text-highlighted data-[state=open]:bg-background-accented/50 hover:bg-background-accented/50"
/>
</PDropdownMenu>
</div>
</template>
</PNavigationMenu>
</template>
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 { NavigationMenuItem } 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 UnoCSS theme.',
},
{
label: 'Theme',
description: 'You can customize components by using the `class` / `ui` 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<NavigationMenuItem>;
</script>
<template>
<PNavigationMenu
:items="items"
:ui="{
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 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">
<Placeholder class="size-full min-h-48" />
</li>
<li
v-for="child in item.children"
:key="child.label"
>
<PLink class="text-sm p-3 text-left rounded-md transition-colors hover:bg-background-elevated/50">
<p class="color-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 |
|---|
Slots
| Slot | Type |
|---|
Emits
| Event | Type |
|---|
Theme
app.config.ts
export default defineAppConfig({
ui: {
navigationMenu: {
slots: {
root: 'flex gap-1.5 relative [&>div]:min-w-0',
list: 'min-w-0 isolate',
label: 'color-text-highlighted text-xs/5 font-600 px-2.5 py-1.5 flex gap-1.5 w-full items-center',
item: 'min-w-0',
link: 'group text-sm font-500 flex gap-1.5 w-full items-center relative focus-visible:outline-none focus:outline-none before:rounded-md before:content-empty before:absolute before:-z-1 focus-visible:before:outline-3',
linkLeadingIcon: 'shrink-0 size-5',
linkLeadingAvatar: 'shrink-0',
linkLeadingAvatarSize: '2xs',
linkLeadingChipSize: 'sm',
linkTrailing: 'group ms-auto inline-flex gap-1.5 items-center',
linkTrailingBadge: 'shrink-0',
linkTrailingBadgeSize: 'sm',
linkTrailingIcon: 'shrink-0 size-5 transform transition-transform-280 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none',
linkLabel: 'truncate',
linkLabelExternalIcon: 'color-text-dimmed align-top size-3 inline-block',
childList: 'isolate',
childLabel: 'color-text-highlighted text-xs',
childItem: '',
childLink: 'group text-sm text-start flex size-full items-start relative focus-visible:outline-none focus:outline-none before:rounded-md before:content-empty before:absolute before:-z-1 focus-visible:before:outline-3',
childLinkWrapper: 'min-w-0',
childLinkIcon: 'shrink-0 size-5',
childLinkLabel: 'truncate',
childLinkLabelExternalIcon: 'color-text-dimmed align-top size-3 inline-block',
childLinkDescription: 'color-text-muted',
separator: 'bg-border px-2 h-px',
viewportWrapper: 'flex w-full start-0 top-full absolute',
viewport: 'rounded-md bg-background h-$akar-navigation-menu-viewport-height w-full ring ring-border shadow-lg origin-[top_center] transition-[width,height,left,right]-280 ease-out relative z-1 overflow-hidden motion-reduce:transition-none data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90',
content: '',
indicator: 'flex h-2.5 w-$akar-navigation-menu-indicator-size translate-x-$akar-navigation-menu-indicator-position transition-[transform,width]-280 ease-out items-end bottom-0 left-0 justify-center absolute z-2 overflow-hidden data-[state=hidden]:opacity-0 data-[state=hidden]:animate-out data-[state=hidden]:fade-out motion-reduce:transition-none data-[state=visible]:animate-in data-[state=visible]:fade-in',
arrow: 'border-border bg-background border rounded-xs size-2.5 rotate-45 top-[50%] relative z-1'
},
variants: {
color: {
primary: {
link: 'before:outline-primary/25',
childLink: 'before:outline-primary/25'
},
secondary: {
link: 'before:outline-secondary/25',
childLink: 'before:outline-secondary/25'
},
success: {
link: 'before:outline-success/25',
childLink: 'before:outline-success/25'
},
info: {
link: 'before:outline-info/25',
childLink: 'before:outline-info/25'
},
warning: {
link: 'before:outline-warning/25',
childLink: 'before:outline-warning/25'
},
error: {
link: 'before:outline-error/25',
childLink: 'before:outline-error/25'
},
neutral: {
link: 'before:outline-border-inverted/25',
childLink: 'before:outline-border-inverted/25'
}
},
highlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
pill: '',
link: ''
},
orientation: {
horizontal: {
root: 'items-center justify-between',
list: 'flex items-center',
item: 'py-2',
link: 'px-2.5 py-1.5 before:inset-x-px before:inset-y-0',
childList: 'p-2 grid',
childLink: 'px-3 py-2 gap-2 before:inset-x-px before:inset-y-0',
childLinkLabel: 'font-500',
content: 'max-h-[70vh] w-full start-0 top-0 absolute overflow-y-auto'
},
vertical: {
root: 'flex-col',
link: 'px-2.5 py-1.5 flex-row before:inset-x-0 before:inset-y-px',
childLabel: 'px-1.5 py-0.5',
childLink: 'p-1.5 gap-1.5 before:inset-x-0 before:inset-y-px'
}
},
contentOrientation: {
horizontal: {
viewportWrapper: 'justify-center',
content: 'data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52'
},
vertical: {
viewport: 'left-$akar-navigation-menu-viewport-left sm:w-$akar-navigation-menu-viewport-width rtl:left-auto rtl:right-[calc(100%-var(--akar-navigation-menu-viewport-left)-var(--akar-navigation-menu-viewport-width))]'
}
},
active: {
true: {
childLink: 'before:bg-background-elevated color-text-highlighted',
childLinkIcon: 'color-text'
},
false: {
link: 'color-text-muted',
linkLeadingIcon: 'color-text-dimmed',
childLink: [
'color-text hover:color-text-highlighted hover:before:bg-background-elevated/50',
'transition-colors before:transition-colors'
],
childLinkIcon: [
'color-text-dimmed group-hover:color-text',
'transition-colors'
]
}
},
disabled: {
true: {
link: 'opacity-75 cursor-not-allowed'
}
},
highlight: {
true: ''
},
level: {
true: ''
},
collapsed: {
true: ''
}
},
compoundVariants: [
{
orientation: 'horizontal',
contentOrientation: 'horizontal',
class: {
childList: 'grid-cols-2 gap-2'
}
},
{
orientation: 'horizontal',
contentOrientation: 'vertical',
class: {
childList: 'gap-1',
content: 'pohon:w-60'
}
},
{
orientation: 'vertical',
collapsed: false,
class: {
childList: 'ms-5 border-s border-border',
childItem: 'ps-1.5 -ms-px',
content: 'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up data-[state=closed]:overflow-hidden'
}
},
{
orientation: 'vertical',
collapsed: true,
class: {
link: 'px-1.5',
linkLabel: 'hidden',
linkTrailing: 'hidden',
content: 'shadow-sm rounded-sm min-h-6 p-1'
}
},
{
orientation: 'horizontal',
highlight: true,
class: {
link: [
'after:rounded-full after:h-px after:block after:content-empty after:inset-x-2.5 after:absolute after:-bottom-2',
'after:transition-colors'
]
}
},
{
orientation: 'vertical',
highlight: true,
level: true,
class: {
link: [
'after:content-empty after:rounded-full after:w-px after:block after:inset-y-0.5 after:absolute after:-start-1.5',
'after:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
class: {
link: [
'hover:color-text-highlighted hover:before:bg-background-elevated/50',
'transition-colors before:transition-colors'
],
linkLeadingIcon: [
'group-hover:color-text',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:color-text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:color-text'
}
},
{
disabled: false,
variant: 'pill',
highlight: true,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-background-elevated/50'
}
},
{
disabled: false,
variant: 'pill',
highlight: false,
active: false,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-background-elevated/50'
}
},
{
color: 'primary',
variant: 'pill',
active: true,
class: {
link: 'color-primary',
linkLeadingIcon: 'color-primary group-data-[state=open]:color-primary'
}
},
{
color: 'neutral',
variant: 'pill',
active: true,
class: {
link: 'color-text-highlighted',
linkLeadingIcon: 'color-text-highlighted group-data-[state=open]:color-text-highlighted'
}
},
{
variant: 'pill',
active: true,
highlight: false,
class: {
link: 'before:bg-background-elevated'
}
},
{
variant: 'pill',
active: true,
highlight: true,
disabled: false,
class: {
link: [
'hover:before:bg-background-elevated/50',
'before:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
class: {
link: [
'hover:color-text-highlighted',
'transition-colors'
],
linkLeadingIcon: [
'group-hover:color-text',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:color-text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:color-text'
}
},
{
color: 'primary',
variant: 'link',
active: true,
class: {
link: 'color-primary',
linkLeadingIcon: 'color-primary group-data-[state=open]:color-primary'
}
},
{
color: 'neutral',
variant: 'link',
active: true,
class: {
link: 'color-text-highlighted',
linkLeadingIcon: 'color-text-highlighted group-data-[state=open]:color-text-highlighted'
}
},
{
highlightColor: 'primary',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-primary'
}
},
{
highlightColor: 'neutral',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-background-inverted'
}
}
],
defaultVariants: {
color: 'primary',
highlightColor: 'primary',
variant: 'pill'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
navigationMenu: {
slots: {
root: 'flex gap-1.5 relative [&>div]:min-w-0',
list: 'min-w-0 isolate',
label: 'color-text-highlighted text-xs/5 font-600 px-2.5 py-1.5 flex gap-1.5 w-full items-center',
item: 'min-w-0',
link: 'group text-sm font-500 flex gap-1.5 w-full items-center relative focus-visible:outline-none focus:outline-none before:rounded-md before:content-empty before:absolute before:-z-1 focus-visible:before:outline-3',
linkLeadingIcon: 'shrink-0 size-5',
linkLeadingAvatar: 'shrink-0',
linkLeadingAvatarSize: '2xs',
linkLeadingChipSize: 'sm',
linkTrailing: 'group ms-auto inline-flex gap-1.5 items-center',
linkTrailingBadge: 'shrink-0',
linkTrailingBadgeSize: 'sm',
linkTrailingIcon: 'shrink-0 size-5 transform transition-transform-280 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none',
linkLabel: 'truncate',
linkLabelExternalIcon: 'color-text-dimmed align-top size-3 inline-block',
childList: 'isolate',
childLabel: 'color-text-highlighted text-xs',
childItem: '',
childLink: 'group text-sm text-start flex size-full items-start relative focus-visible:outline-none focus:outline-none before:rounded-md before:content-empty before:absolute before:-z-1 focus-visible:before:outline-3',
childLinkWrapper: 'min-w-0',
childLinkIcon: 'shrink-0 size-5',
childLinkLabel: 'truncate',
childLinkLabelExternalIcon: 'color-text-dimmed align-top size-3 inline-block',
childLinkDescription: 'color-text-muted',
separator: 'bg-border px-2 h-px',
viewportWrapper: 'flex w-full start-0 top-full absolute',
viewport: 'rounded-md bg-background h-$akar-navigation-menu-viewport-height w-full ring ring-border shadow-lg origin-[top_center] transition-[width,height,left,right]-280 ease-out relative z-1 overflow-hidden motion-reduce:transition-none data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90',
content: '',
indicator: 'flex h-2.5 w-$akar-navigation-menu-indicator-size translate-x-$akar-navigation-menu-indicator-position transition-[transform,width]-280 ease-out items-end bottom-0 left-0 justify-center absolute z-2 overflow-hidden data-[state=hidden]:opacity-0 data-[state=hidden]:animate-out data-[state=hidden]:fade-out motion-reduce:transition-none data-[state=visible]:animate-in data-[state=visible]:fade-in',
arrow: 'border-border bg-background border rounded-xs size-2.5 rotate-45 top-[50%] relative z-1'
},
variants: {
color: {
primary: {
link: 'before:outline-primary/25',
childLink: 'before:outline-primary/25'
},
secondary: {
link: 'before:outline-secondary/25',
childLink: 'before:outline-secondary/25'
},
success: {
link: 'before:outline-success/25',
childLink: 'before:outline-success/25'
},
info: {
link: 'before:outline-info/25',
childLink: 'before:outline-info/25'
},
warning: {
link: 'before:outline-warning/25',
childLink: 'before:outline-warning/25'
},
error: {
link: 'before:outline-error/25',
childLink: 'before:outline-error/25'
},
neutral: {
link: 'before:outline-border-inverted/25',
childLink: 'before:outline-border-inverted/25'
}
},
highlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
pill: '',
link: ''
},
orientation: {
horizontal: {
root: 'items-center justify-between',
list: 'flex items-center',
item: 'py-2',
link: 'px-2.5 py-1.5 before:inset-x-px before:inset-y-0',
childList: 'p-2 grid',
childLink: 'px-3 py-2 gap-2 before:inset-x-px before:inset-y-0',
childLinkLabel: 'font-500',
content: 'max-h-[70vh] w-full start-0 top-0 absolute overflow-y-auto'
},
vertical: {
root: 'flex-col',
link: 'px-2.5 py-1.5 flex-row before:inset-x-0 before:inset-y-px',
childLabel: 'px-1.5 py-0.5',
childLink: 'p-1.5 gap-1.5 before:inset-x-0 before:inset-y-px'
}
},
contentOrientation: {
horizontal: {
viewportWrapper: 'justify-center',
content: 'data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52'
},
vertical: {
viewport: 'left-$akar-navigation-menu-viewport-left sm:w-$akar-navigation-menu-viewport-width rtl:left-auto rtl:right-[calc(100%-var(--akar-navigation-menu-viewport-left)-var(--akar-navigation-menu-viewport-width))]'
}
},
active: {
true: {
childLink: 'before:bg-background-elevated color-text-highlighted',
childLinkIcon: 'color-text'
},
false: {
link: 'color-text-muted',
linkLeadingIcon: 'color-text-dimmed',
childLink: [
'color-text hover:color-text-highlighted hover:before:bg-background-elevated/50',
'transition-colors before:transition-colors'
],
childLinkIcon: [
'color-text-dimmed group-hover:color-text',
'transition-colors'
]
}
},
disabled: {
true: {
link: 'opacity-75 cursor-not-allowed'
}
},
highlight: {
true: ''
},
level: {
true: ''
},
collapsed: {
true: ''
}
},
compoundVariants: [
{
orientation: 'horizontal',
contentOrientation: 'horizontal',
class: {
childList: 'grid-cols-2 gap-2'
}
},
{
orientation: 'horizontal',
contentOrientation: 'vertical',
class: {
childList: 'gap-1',
content: 'pohon:w-60'
}
},
{
orientation: 'vertical',
collapsed: false,
class: {
childList: 'ms-5 border-s border-border',
childItem: 'ps-1.5 -ms-px',
content: 'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up data-[state=closed]:overflow-hidden'
}
},
{
orientation: 'vertical',
collapsed: true,
class: {
link: 'px-1.5',
linkLabel: 'hidden',
linkTrailing: 'hidden',
content: 'shadow-sm rounded-sm min-h-6 p-1'
}
},
{
orientation: 'horizontal',
highlight: true,
class: {
link: [
'after:rounded-full after:h-px after:block after:content-empty after:inset-x-2.5 after:absolute after:-bottom-2',
'after:transition-colors'
]
}
},
{
orientation: 'vertical',
highlight: true,
level: true,
class: {
link: [
'after:content-empty after:rounded-full after:w-px after:block after:inset-y-0.5 after:absolute after:-start-1.5',
'after:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
class: {
link: [
'hover:color-text-highlighted hover:before:bg-background-elevated/50',
'transition-colors before:transition-colors'
],
linkLeadingIcon: [
'group-hover:color-text',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:color-text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:color-text'
}
},
{
disabled: false,
variant: 'pill',
highlight: true,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-background-elevated/50'
}
},
{
disabled: false,
variant: 'pill',
highlight: false,
active: false,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-background-elevated/50'
}
},
{
color: 'primary',
variant: 'pill',
active: true,
class: {
link: 'color-primary',
linkLeadingIcon: 'color-primary group-data-[state=open]:color-primary'
}
},
{
color: 'neutral',
variant: 'pill',
active: true,
class: {
link: 'color-text-highlighted',
linkLeadingIcon: 'color-text-highlighted group-data-[state=open]:color-text-highlighted'
}
},
{
variant: 'pill',
active: true,
highlight: false,
class: {
link: 'before:bg-background-elevated'
}
},
{
variant: 'pill',
active: true,
highlight: true,
disabled: false,
class: {
link: [
'hover:before:bg-background-elevated/50',
'before:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
class: {
link: [
'hover:color-text-highlighted',
'transition-colors'
],
linkLeadingIcon: [
'group-hover:color-text',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:color-text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:color-text'
}
},
{
color: 'primary',
variant: 'link',
active: true,
class: {
link: 'color-primary',
linkLeadingIcon: 'color-primary group-data-[state=open]:color-primary'
}
},
{
color: 'neutral',
variant: 'link',
active: true,
class: {
link: 'color-text-highlighted',
linkLeadingIcon: 'color-text-highlighted group-data-[state=open]:color-text-highlighted'
}
},
{
highlightColor: 'primary',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-primary'
}
},
{
highlightColor: 'neutral',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-background-inverted'
}
}
],
defaultVariants: {
color: 'primary',
highlightColor: 'primary',
variant: 'pill'
}
}
}
})
]
})Changelog
No recent changes