Navigatiemenu
Een lijst met links die horizontaal of verticaal kunnen worden weergegeven.
Gebruik
Gebruik het onderdeel NavigationMenu om een lijst met links horizontaal of verticaal weer te geven.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
])
</script>
<template>
<UNavigationMenu :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
])
</script>
<template>
<UNavigationMenu :items="items" />
</template>Items
Gebruik de items prop als een array van objecten met de volgende eigenschappen:
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 }
U kunt elke eigenschap van de Link component doorgeven, zoals to, target, enz.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
])
</script>
<template>
<UNavigationMenu :items="items" class="w-full justify-center" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
])
</script>
<template>
<UNavigationMenu :items="items" class="w-full justify-center" />
</template>U kunt ook een reeks arrays doorgeven aan de
items prop om groepen items weer te geven.Elk item kan een
children-reeks objecten met de volgende eigenschappen gebruiken om submenu 's te maken:label: stringdescription?: stringicon?: stringonSelect?: (e: Event) => voidclass?: any
Oriëntatie
Gebruik de orientation prop om de oriëntatie van het navigatiemenu te wijzigen.
Als de oriëntatie
vertical is, wordt een Accordion gebruikt om elke groep weer te geven.
U kunt de open status van elk item regelen met de eigenschappen open en defaultOpen en het gedrag wijzigen met behulp van de collapsible en type rekwisieten.Wanneer orientatie
vertical is en het menu niet collapsed is, worden kinderen recursief weergegeven als items, dus ui.link stijlen ze. ui.childLink geldt alleen voor de content weergegeven in horizontal orientatie en
naar de popover wanneer collapsed.<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
type: 'trigger',
active: true,
defaultOpen: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu orientation="vertical" :items="items" class="data-[orientation=vertical]:w-48" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
type: 'trigger',
active: true,
defaultOpen: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu orientation="vertical" :items="items" class="data-[orientation=vertical]:w-48" />
</template>Groepen worden uit elkaar geplaatst wanneer de oriëntatie
horizontal is en gescheiden wanneer de oriëntatie vertical is.Ingeklapt
Gebruik in vertical oriëntatie de collapsed prop om het NavigationMenu samen te vouwen, dit kan bijvoorbeeld handig zijn in een zijbalk.
U kunt de
tooltip en popover rekwisieten gebruiken om meer informatie over de samengevouwen items weer te geven.<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu collapsed orientation="vertical" :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu collapsed orientation="vertical" :items="items" />
</template>Hoogtepunt
Gebruik de highlight prop om een gemarkeerde rand voor het actieve item weer te geven.
Gebruik de highlight-color prop om de kleur van de rand te veranderen. Standaard wordt de color prop gebruikt.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description:
'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
defaultOpen: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu
highlight
highlight-color="primary"
orientation="horizontal"
:items="items"
class="data-[orientation=horizontal]:border-b border-default data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description:
'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
defaultOpen: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu
highlight
highlight-color="primary"
orientation="horizontal"
:items="items"
class="data-[orientation=horizontal]:border-b border-default data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48"
/>
</template>In dit voorbeeld wordt de klasse
border-b toegepast om een rand in horizontal-oriëntatie weer te geven, dit wordt niet standaard gedaan om u een schone lei te geven om mee te werken.In
vertical-oriëntatie benadrukt de highlight-prop alleen de grens van actieve kinderen.Kleur
Gebruik de color prop om de kleur van het Navigatiemenu te wijzigen.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[][]>([
[
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started'
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
}
]
])
</script>
<template>
<UNavigationMenu color="neutral" :items="items" class="w-full" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[][]>([
[
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started'
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
}
]
])
</script>
<template>
<UNavigationMenu color="neutral" :items="items" class="w-full" />
</template>Variant
Gebruik de variant prop om de variant van het Navigatiemenu te wijzigen.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[][]>([
[
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started'
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
}
]
])
</script>
<template>
<UNavigationMenu color="neutral" variant="link" :items="items" class="w-full" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[][]>([
[
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started'
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank'
}
]
])
</script>
<template>
<UNavigationMenu color="neutral" variant="link" :items="items" class="w-full" />
</template>De
highlight prop verandert de actieve itemstijl van de pill-variant. Probeer het uit om het verschil te zien.Achterliggende pictogram
Gebruik de trailing-icon prop om de Icon van elk item aan te passen. Standaard i-lucide-chevron-down. Dit pictogram wordt alleen weergegeven als een item kinderen heeft.
U kunt ook een pictogram voor een specifiek item instellen met de eigenschap
trailingIcon in het itemobject.<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
])
</script>
<template>
<UNavigationMenu 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 '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
])
</script>
<template>
<UNavigationMenu trailing-icon="i-lucide-arrow-down" :items="items" class="w-full justify-center" />
</template>Pijl
Gebruik de arrow-prop om een pijl op de NavigationMenu-inhoud weer te geven wanneer items kinderen hebben.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
])
</script>
<template>
<UNavigationMenu arrow :items="items" class="w-full justify-center" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
])
</script>
<template>
<UNavigationMenu arrow :items="items" class="w-full justify-center" />
</template>De pijl is geanimeerd om het actieve item te volgen.
Inhoud Oriëntatie
Gebruik de content-orientation prop om de oriëntatie van de inhoud te wijzigen.
Deze prop werkt alleen als
orientationhorizontal is.<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
}
]
}
])
</script>
<template>
<UNavigationMenu arrow content-orientation="vertical" :items="items" class="w-full justify-center" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
}
]
}
])
</script>
<template>
<UNavigationMenu arrow content-orientation="vertical" :items="items" class="w-full justify-center" />
</template>Ontkoppelen
Gebruik de unmount-on-hide-prop om het gedrag bij het verwijderen van inhoud te regelen. Standaard true.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
])
</script>
<template>
<UNavigationMenu :unmount-on-hide="false" :items="items" class="w-full justify-center" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[]>([
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started',
children: [
{
label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.',
icon: 'i-lucide-house'
},
{
label: 'Installation',
description: 'Learn how to install and configure Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
])
</script>
<template>
<UNavigationMenu :unmount-on-hide="false" :items="items" class="w-full justify-center" />
</template>U kunt de DOM inspecteren om te zien dat de inhoud van elk item wordt weergegeven.
Voorbeelden
Controle actief item
U kunt de actieve item (s) besturen met behulp van de default-value prop of de v-model richtlijn met de value van het item.
Als er geen value wordt geleverd, wordt standaard item-${index} gebruikt voor items op het hoogste niveau of item-${level}-${index} voor geneste items.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items: 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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.'
},
{
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>
<UNavigationMenu v-model="active" :items="items" class="w-full justify-center" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'
const items: 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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.'
},
{
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>
<UNavigationMenu v-model="active" :items="items" class="w-full justify-center" />
</template>
Gebruik de
value-key prop om de sleutel te wijzigen die wordt gebruikt om items te matchen wanneer een v-model of default-value wordt geleverd.In dit voorbeeld, met
defineShortcuts, kunt u het actieve item omschakelen door op: kbd{value="1"},: kbd{value="2"} of: kbd{value="3"} te drukken.Met tooltip in items
Wanneer de oriëntatie vertical is en het menu collapsed is, kunt u de tooltip prop instellen op true om een Tooltip rond items met hun label weer te geven, maar u kunt ook de
tooltip eigenschap op elk item om de standaard tooltip te overschrijven. In horizontal-oriëntatie kunt u de tooltip-eigenschap op elk item gebruiken om een Tooltip rond items weer te geven.
De eigenschap
tooltip op een item zal altijd een tooltip weergeven, ongeacht de globale tooltip prop.U kunt elke eigenschap van de Tooltip component wereldwijd of op elk item doorgeven.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank',
tooltip: {
text: 'Open on GitHub',
kbds: [
'6k'
]
}
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu tooltip collapsed orientation="vertical" :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank',
tooltip: {
text: 'Open on GitHub',
kbds: [
'6k'
]
}
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu tooltip collapsed orientation="vertical" :items="items" />
</template>Met popover in items
Wanneer de oriëntatie vertical is en het menu collapsed is, kunt u de popover prop instellen op true om een Popover weer te geven rond items met hun kinderen, maar u kunt ook de
popover eigenschap op elk item om de standaard popover te overschrijven.
De eigenschap
popover op een item zal altijd een popover weergeven, ongeacht de globale popover prop.U kunt elke eigenschap van de Popover component wereldwijd of op elk item doorgeven.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
popover: {
mode: 'click'
},
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank',
tooltip: {
text: 'Open on GitHub',
kbds: [
'6k'
]
}
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu popover collapsed orientation="vertical" :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/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 Nuxt UI in your application.',
icon: 'i-lucide-cloud-download'
},
{
label: 'Icons',
icon: 'i-lucide-smile',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
icon: 'i-lucide-cog',
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
]
},
{
label: 'Composables',
icon: 'i-lucide-database',
popover: {
mode: 'click'
},
children: [
{
label: 'defineShortcuts',
icon: 'i-lucide-file-text',
description: 'Define shortcuts for your application.',
to: '/docs/composables/define-shortcuts'
},
{
label: 'useOverlay',
icon: 'i-lucide-file-text',
description: 'Display a modal/slideover within your application.',
to: '/docs/composables/use-overlay'
},
{
label: 'useToast',
icon: 'i-lucide-file-text',
description: 'Display a toast within your application.',
to: '/docs/composables/use-toast'
}
]
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components',
active: true,
children: [
{
label: 'Link',
icon: 'i-lucide-file-text',
description: 'Use NuxtLink with superpowers.',
to: '/docs/components/link'
},
{
label: 'Modal',
icon: 'i-lucide-file-text',
description: 'Display a modal within your application.',
to: '/docs/components/modal'
},
{
label: 'NavigationMenu',
icon: 'i-lucide-file-text',
description: 'Display a list of links.',
to: '/docs/components/navigation-menu'
},
{
label: 'Pagination',
icon: 'i-lucide-file-text',
description: 'Display a list of pages.',
to: '/docs/components/pagination'
},
{
label: 'Popover',
icon: 'i-lucide-file-text',
description: 'Display a non-modal dialog that floats around a trigger element.',
to: '/docs/components/popover'
},
{
label: 'Progress',
icon: 'i-lucide-file-text',
description: 'Show a horizontal bar to indicate task progression.',
to: '/docs/components/progress'
}
]
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
badge: '6k',
to: 'https://github.com/nuxt/ui',
target: '_blank',
tooltip: {
text: 'Open on GitHub',
kbds: [
'6k'
]
}
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu popover collapsed orientation="vertical" :items="items" />
</template>U kunt de
#content-sleuf gebruiken om de inhoud van de popover in de vertical-oriëntatie aan te passen.Met chip in artikelen: badge{label="4.5+" class="align-text-top"}
Gebruik de eigenschap chip om een Chip rond het pictogram van de items weer te geven, u kunt een van de rekwisieten doorgeven.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/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: '/docs/components',
active: true,
chip: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu collapsed orientation="vertical" :items="items" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/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: '/docs/components',
active: true,
chip: true
}
],
[
{
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt/ui',
target: '_blank'
},
{
label: 'Help',
icon: 'i-lucide-circle-help',
disabled: true
}
]
])
</script>
<template>
<UNavigationMenu collapsed orientation="vertical" :items="items" />
</template>Met onderste tabbalk
Gebruik de ui-prop om het NavigationMenu om te vormen tot een mobiele tabbalk met pictogrammen en kleine labels, vergelijkbaar met YouTube of Instagram.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items: 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>
<UNavigationMenu
:items="items"
:ui="{
root: 'justify-around border-t border-default 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>
Met samengevouwen labels
Gebruik de ui prop om een label onder elk pictogram weer te geven wanneer het is samengevouwen.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items: 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>
<UNavigationMenu
collapsed
orientation="vertical"
:items="items"
:ui="{
link: 'flex-col gap-1',
linkLabel: 'block text-[10px]/3 text-center'
}"
/>
</template>
U kunt dit ook globaal doen via de
app.config.ts met 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'
}
}]
}
}
})
Met aangepaste sleuf
Gebruik de eigenschap slot om een specifiek item aan te passen.
U krijgt toegang tot de volgende slots:
#{{ item.slot }}#{{ item.slot }}-leading#{{ item.slot }}-label#{{ item.slot }}-trailing#{{ item.slot }}-content
<script setup lang="ts">
import type { NavigationMenuItem, DropdownMenuItem } from '@nuxt/ui'
const items = [
{
label: 'Guide',
icon: 'i-lucide-book-open',
to: '/docs/getting-started'
},
{
label: 'Composables',
icon: 'i-lucide-database',
to: '/docs/composables',
class: 'hidden'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/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: '/docs/composables'
},
{
label: 'Components',
icon: 'i-lucide-box',
to: '/docs/components'
}
] satisfies DropdownMenuItem[]
},
{
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt/ui',
target: '_blank',
slot: 'github' as const
}
] satisfies NavigationMenuItem[]
</script>
<template>
<UNavigationMenu :items="items" class="w-full justify-center">
<template #more="{ item }">
<UDropdownMenu :content="item.content" :items="item.items">
<UButton icon="i-lucide-ellipsis" color="neutral" variant="link" />
</UDropdownMenu>
</template>
<template #github-trailing>
<UBadge label="6k+" color="neutral" variant="subtle" size="sm" />
</template>
</UNavigationMenu>
</template>
U kunt ook de
#item, #item-leading, #item-label, #item-trailing en #item-content slots gebruiken om alle items aan te passen.Met achterliggende sleuf
Gebruik de #item-trailing-sleuf of de slot-eigenschap (#{{ item.slot }}-trailing) om een DropdownMenu toe te voegen die verschijnt bij hover, vergelijkbaar met Notion of Linear.
<script setup lang="ts">
import type { NavigationMenuItem, DropdownMenuItem } from '@nuxt/ui'
const items: 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: 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>
<UNavigationMenu
orientation="vertical"
:items="items"
:ui="{ link: 'overflow-hidden has-data-[state=open]:before:bg-elevated/50' }"
class="w-48"
>
<template #personal-label-trailing>
<UButton icon="i-lucide-plus" color="neutral" variant="ghost" size="xs" />
</template>
<template #teams-label-trailing>
<UButton icon="i-lucide-plus" color="neutral" variant="ghost" size="xs" />
</template>
<template #item-trailing>
<div class="flex -mr-1.5 -my-0.5 translate-x-full group-hover:translate-x-0 has-data-[state=open]:translate-x-0 transition-transform">
<UDropdownMenu
:items="dropdownItems"
:content="{ align: 'start' }"
:modal="false"
size="xs"
>
<UButton
as="div"
icon="i-lucide-ellipsis"
color="neutral"
variant="ghost"
size="xs"
class="text-muted hover:text-highlighted hover:bg-accented/50 data-[state=open]:bg-accented/50 mr-1.5"
/>
</UDropdownMenu>
</div>
</template>
</UNavigationMenu>
</template>
Met inhoud slot
Gebruik de #item-content-sleuf of de slot-eigenschap (#{{ item.slot }}-content) om de inhoud van een specifiek item aan te passen.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = [
{
label: 'Docs',
icon: 'i-lucide-book-open',
slot: 'docs' as const,
children: [
{
label: 'Icons',
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Theme',
description: 'You can customize components by using the `class` / `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 NavigationMenuItem[]
</script>
<template>
<UNavigationMenu
:items="items"
:ui="{
viewport: 'sm:w-(--reka-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="grid gap-2 p-4 lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
<li class="row-span-3">
<Placeholder class="size-full min-h-48" />
</li>
<li v-for="child in item.children" :key="child.label">
<ULink class="text-sm text-left rounded-md p-3 transition-colors hover:bg-elevated/50">
<p class="font-medium text-highlighted">
{{ child.label }}
</p>
<p class="text-muted line-clamp-2">
{{ child.description }}
</p>
</ULink>
</li>
</ul>
</template>
</UNavigationMenu>
</template>
In dit voorbeeld voegen we de klasse
sm:w-(--reka-navigation-menu-viewport-width) toe aan de viewport om een dynamische breedte te hebben. Dit vereist een breedte instellen op het eerste kind van de inhoud.API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
type | 'multiple' | KDetermines whether a "single" or "multiple" items can be selected at a time. Only works when |
modelValue | NavigationMenuModelValue<K, O>The controlled value of the active item(s).
Use this when you need to control the state of the items. Can be binded with | |
defaultValue | NavigationMenuModelValue<K, O>The default active value of the item(s).
Use when you do not need to control the state of the item(s). | |
trailingIcon | appConfig.ui.icons.chevronDown | anyThe icon displayed to open the menu. |
externalIcon | true | anyThe icon displayed when the item is an external link.
Set to |
items | T | |
color | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
variant | 'pill' | "pill" | "link" |
orientation | 'horizontal' | OThe orientation of the menu. |
collapsed | false | boolean Collapse the navigation menu to only show icons.
Only works when |
tooltip | false | boolean | TooltipProps Display a tooltip on the items with the label of the item.
Only works when |
popover | false | boolean | PopoverProps<PopoverMode> Display a popover on the items when the menu is collapsed with the children list.
|
highlight | boolean Display a line next to the active item. | |
highlightColor | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
content | NavigationMenuContentProps & Partial<EmitsToProps<DismissableLayerEmits>>The content of the menu. | |
contentOrientation | 'horizontal' | "horizontal" | "vertical"The orientation of the content.
Only works when |
arrow | false | boolean Display an arrow alongside the menu. |
valueKey | 'value' | keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>The key used to get the value from the item. |
labelKey | 'label' | keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>The key used to get the label from the item. |
delayDuration | 0 | numberThe duration from when the pointer enters the trigger until the tooltip gets opened. |
disableClickTrigger | false | boolean If |
disableHoverTrigger | false | boolean If |
skipDelayDuration | 300 | numberHow much time a user has to enter another trigger without incurring a delay again. |
disablePointerLeaveClose | false | boolean If |
unmountOnHide | true | boolean When |
disabled | false | boolean When |
collapsible | true | boolean When type is "single", allows closing content when clicking trigger for an open item. When type is "multiple", this prop has no effect. |
ui | { root?: SlotClass; list?: SlotClass; label?: SlotClass; item?: SlotClass; link?: SlotClass; linkLeadingIcon?: SlotClass; linkLeadingAvatar?: SlotClass; linkLeadingAvatarSize?: SlotClass; linkLeadingChipSize?: SlotClass; linkTrailing?: SlotClass; linkTrailingBadge?: SlotClass; linkTrailingBadgeSize?: SlotClass; linkTrailingIcon?: SlotClass; linkLabel?: SlotClass; linkLabelExternalIcon?: SlotClass; childList?: SlotClass; childLabel?: SlotClass; childItem?: SlotClass; childLink?: SlotClass; childLinkWrapper?: SlotClass; childLinkIcon?: SlotClass; childLinkLabel?: SlotClass; childLinkLabelExternalIcon?: SlotClass; childLinkDescription?: SlotClass; separator?: SlotClass; viewportWrapper?: SlotClass; viewport?: SlotClass; content?: SlotClass; indicator?: SlotClass; arrow?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
item | { item: NestedItem<T>; index: number; active: boolean; ui: object; } |
item-leading | { item: NestedItem<T>; index: number; active: boolean; ui: object; } |
item-label | { item: NestedItem<T>; index: number; active: boolean; } |
item-trailing | { item: NestedItem<T>; index: number; active: boolean; ui: object; } |
item-content | { item: NestedItem<T>; index: number; active: boolean; ui: object; } |
list-leading | {} |
list-trailing | {} |
Uitzendt
| Event | Type |
|---|---|
update:modelValue | [value: NavigationMenuModelValue<K, O> | undefined] |
Thema
app.config.ts
export default defineAppConfig({
ui: {
navigationMenu: {
slots: {
root: 'relative flex gap-1.5 [&>div]:min-w-0',
list: 'isolate min-w-0',
label: 'w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5',
item: 'min-w-0',
link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none 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: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none',
linkLabel: 'truncate',
linkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
childList: 'isolate',
childLabel: 'text-xs text-highlighted',
childItem: '',
childLink: 'group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:outline-3',
childLinkWrapper: 'min-w-0',
childLinkIcon: 'size-5 shrink-0',
childLinkLabel: 'truncate',
childLinkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
childLinkDescription: 'text-muted',
separator: 'px-2 h-px bg-border',
viewportWrapper: 'absolute top-full start-0 flex w-full',
viewport: 'relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left,right] duration-200 ease-out motion-reduce:transition-none origin-[top_center] data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] z-1',
content: '',
indicator: 'absolute left-0 data-[state=visible]:animate-[fade-in_100ms_var(--ease-out)] data-[state=hidden]:animate-[fade-out_100ms_var(--ease-out)] data-[state=hidden]:opacity-0 bottom-0 z-2 w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200 ease-out motion-reduce:transition-none',
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-1 rounded-xs'
},
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-inverted/25',
childLink: 'before:outline-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: 'grid p-2',
childLink: 'px-3 py-2 gap-2 before:inset-x-px before:inset-y-0',
childLinkLabel: 'font-medium',
content: 'absolute top-0 start-0 w-full max-h-[70vh] overflow-y-auto'
},
vertical: {
root: 'flex-col',
link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
childLabel: 'px-1.5 py-0.5',
childLink: 'p-1.5 gap-1.5 before:inset-y-px before:inset-x-0'
}
},
contentOrientation: {
horizontal: {
viewportWrapper: 'justify-center',
content: 'data-[motion=from-start]:animate-[enter-from-left_200ms_var(--ease-out)] data-[motion=from-end]:animate-[enter-from-right_200ms_var(--ease-out)] data-[motion=to-start]:animate-[exit-to-left_200ms_var(--ease-out)] data-[motion=to-end]:animate-[exit-to-right_200ms_var(--ease-out)]'
},
vertical: {
viewport: 'sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left) rtl:left-auto rtl:right-[calc(100%-var(--reka-navigation-menu-viewport-left)-var(--reka-navigation-menu-viewport-width))]'
}
},
active: {
true: {
childLink: 'before:bg-elevated text-highlighted',
childLinkIcon: 'text-default'
},
false: {
link: 'text-muted',
linkLeadingIcon: 'text-dimmed',
childLink: [
'hover:before:bg-elevated/50 text-default hover:text-highlighted',
'transition-colors before:transition-colors'
],
childLinkIcon: [
'text-dimmed group-hover:text-default',
'transition-colors'
]
}
},
disabled: {
true: {
link: 'cursor-not-allowed opacity-75'
}
},
highlight: {
true: ''
},
level: {
true: ''
},
collapsed: {
true: ''
}
},
compoundVariants: [
{
orientation: 'horizontal',
contentOrientation: 'horizontal',
class: {
childList: 'grid-cols-2 gap-2'
}
},
{
orientation: 'horizontal',
contentOrientation: 'vertical',
class: {
childList: 'gap-1',
content: 'w-60'
}
},
{
orientation: 'vertical',
collapsed: false,
class: {
childList: 'ms-5 border-s border-default',
childItem: 'ps-1.5 -ms-px',
content: 'data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] 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:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full',
'after:transition-colors'
]
}
},
{
orientation: 'vertical',
highlight: true,
level: true,
class: {
link: [
'after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full',
'after:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
class: {
link: [
'hover:text-highlighted hover:before:bg-elevated/50',
'transition-colors before:transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:text-default'
}
},
{
disabled: false,
variant: 'pill',
highlight: true,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-elevated/50'
}
},
{
disabled: false,
variant: 'pill',
highlight: false,
active: false,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-elevated/50'
}
},
{
color: 'primary',
variant: 'pill',
active: true,
class: {
link: 'text-primary',
linkLeadingIcon: 'text-primary group-data-[state=open]:text-primary'
}
},
{
color: 'neutral',
variant: 'pill',
active: true,
class: {
link: 'text-highlighted',
linkLeadingIcon: 'text-highlighted group-data-[state=open]:text-highlighted'
}
},
{
variant: 'pill',
active: true,
highlight: false,
class: {
link: 'before:bg-elevated'
}
},
{
variant: 'pill',
active: true,
highlight: true,
disabled: false,
class: {
link: [
'hover:before:bg-elevated/50',
'before:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
class: {
link: [
'hover:text-highlighted',
'transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:text-default'
}
},
{
color: 'primary',
variant: 'link',
active: true,
class: {
link: 'text-primary',
linkLeadingIcon: 'text-primary group-data-[state=open]:text-primary'
}
},
{
color: 'neutral',
variant: 'link',
active: true,
class: {
link: 'text-highlighted',
linkLeadingIcon: 'text-highlighted group-data-[state=open]:text-highlighted'
}
},
{
highlightColor: 'primary',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-primary'
}
},
{
highlightColor: 'neutral',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-inverted'
}
}
],
defaultVariants: {
color: 'primary',
highlightColor: 'primary',
variant: 'pill'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
navigationMenu: {
slots: {
root: 'relative flex gap-1.5 [&>div]:min-w-0',
list: 'isolate min-w-0',
label: 'w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5',
item: 'min-w-0',
link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none 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: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none',
linkLabel: 'truncate',
linkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
childList: 'isolate',
childLabel: 'text-xs text-highlighted',
childItem: '',
childLink: 'group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:outline-3',
childLinkWrapper: 'min-w-0',
childLinkIcon: 'size-5 shrink-0',
childLinkLabel: 'truncate',
childLinkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
childLinkDescription: 'text-muted',
separator: 'px-2 h-px bg-border',
viewportWrapper: 'absolute top-full start-0 flex w-full',
viewport: 'relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left,right] duration-200 ease-out motion-reduce:transition-none origin-[top_center] data-[state=open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] z-1',
content: '',
indicator: 'absolute left-0 data-[state=visible]:animate-[fade-in_100ms_var(--ease-out)] data-[state=hidden]:animate-[fade-out_100ms_var(--ease-out)] data-[state=hidden]:opacity-0 bottom-0 z-2 w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200 ease-out motion-reduce:transition-none',
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-1 rounded-xs'
},
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-inverted/25',
childLink: 'before:outline-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: 'grid p-2',
childLink: 'px-3 py-2 gap-2 before:inset-x-px before:inset-y-0',
childLinkLabel: 'font-medium',
content: 'absolute top-0 start-0 w-full max-h-[70vh] overflow-y-auto'
},
vertical: {
root: 'flex-col',
link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
childLabel: 'px-1.5 py-0.5',
childLink: 'p-1.5 gap-1.5 before:inset-y-px before:inset-x-0'
}
},
contentOrientation: {
horizontal: {
viewportWrapper: 'justify-center',
content: 'data-[motion=from-start]:animate-[enter-from-left_200ms_var(--ease-out)] data-[motion=from-end]:animate-[enter-from-right_200ms_var(--ease-out)] data-[motion=to-start]:animate-[exit-to-left_200ms_var(--ease-out)] data-[motion=to-end]:animate-[exit-to-right_200ms_var(--ease-out)]'
},
vertical: {
viewport: 'sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left) rtl:left-auto rtl:right-[calc(100%-var(--reka-navigation-menu-viewport-left)-var(--reka-navigation-menu-viewport-width))]'
}
},
active: {
true: {
childLink: 'before:bg-elevated text-highlighted',
childLinkIcon: 'text-default'
},
false: {
link: 'text-muted',
linkLeadingIcon: 'text-dimmed',
childLink: [
'hover:before:bg-elevated/50 text-default hover:text-highlighted',
'transition-colors before:transition-colors'
],
childLinkIcon: [
'text-dimmed group-hover:text-default',
'transition-colors'
]
}
},
disabled: {
true: {
link: 'cursor-not-allowed opacity-75'
}
},
highlight: {
true: ''
},
level: {
true: ''
},
collapsed: {
true: ''
}
},
compoundVariants: [
{
orientation: 'horizontal',
contentOrientation: 'horizontal',
class: {
childList: 'grid-cols-2 gap-2'
}
},
{
orientation: 'horizontal',
contentOrientation: 'vertical',
class: {
childList: 'gap-1',
content: 'w-60'
}
},
{
orientation: 'vertical',
collapsed: false,
class: {
childList: 'ms-5 border-s border-default',
childItem: 'ps-1.5 -ms-px',
content: 'data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] 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:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full',
'after:transition-colors'
]
}
},
{
orientation: 'vertical',
highlight: true,
level: true,
class: {
link: [
'after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full',
'after:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
class: {
link: [
'hover:text-highlighted hover:before:bg-elevated/50',
'transition-colors before:transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'pill',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:text-default'
}
},
{
disabled: false,
variant: 'pill',
highlight: true,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-elevated/50'
}
},
{
disabled: false,
variant: 'pill',
highlight: false,
active: false,
orientation: 'horizontal',
class: {
link: 'data-[state=open]:before:bg-elevated/50'
}
},
{
color: 'primary',
variant: 'pill',
active: true,
class: {
link: 'text-primary',
linkLeadingIcon: 'text-primary group-data-[state=open]:text-primary'
}
},
{
color: 'neutral',
variant: 'pill',
active: true,
class: {
link: 'text-highlighted',
linkLeadingIcon: 'text-highlighted group-data-[state=open]:text-highlighted'
}
},
{
variant: 'pill',
active: true,
highlight: false,
class: {
link: 'before:bg-elevated'
}
},
{
variant: 'pill',
active: true,
highlight: true,
disabled: false,
class: {
link: [
'hover:before:bg-elevated/50',
'before:transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
class: {
link: [
'hover:text-highlighted',
'transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default',
'transition-colors'
]
}
},
{
disabled: false,
active: false,
variant: 'link',
orientation: 'horizontal',
class: {
link: 'data-[state=open]:text-highlighted',
linkLeadingIcon: 'group-data-[state=open]:text-default'
}
},
{
color: 'primary',
variant: 'link',
active: true,
class: {
link: 'text-primary',
linkLeadingIcon: 'text-primary group-data-[state=open]:text-primary'
}
},
{
color: 'neutral',
variant: 'link',
active: true,
class: {
link: 'text-highlighted',
linkLeadingIcon: 'text-highlighted group-data-[state=open]:text-highlighted'
}
},
{
highlightColor: 'primary',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-primary'
}
},
{
highlightColor: 'neutral',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-inverted'
}
}
],
defaultVariants: {
color: 'primary',
highlightColor: 'primary',
variant: 'pill'
}
}
}
})
]
})Changelog
No recent changes