Navegación Menú
Una lista de enlaces que se pueden mostrar horizontal o verticalmente.
xph0000xUso
Utilice el componente NavigationMenu para mostrar una lista de enlaces horizontal o verticalmente.
<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>Artículos
Utilice el prop items como una matriz de objetos con las siguientes propiedades:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
- xx
badge?: string | number | BadgePropsxx{lang="ts-type"} - xx
chip?: boolean | ChipPropsx{lang="ts-type"}x - xx
tooltip?: TooltipPropsx{lang="ts-type"}x - xx
popover?: PopoverPropsx{lang="ts-type"} - x
trailingIcon?: stringx{lang="ts-type"} - x
type?: 'label' | 'trigger' | 'link'x{lang="ts-type"} - x
defaultOpen?: booleanx{lang="ts-type"} (Edición española) - x
open?: booleanx{lang="ts-type"} - x
value?: stringx{lang="ts-type"} - x
disabled?: booleanx{lang="ts-type"} - xx
slot?: stringx{lang="ts-type"}x - x
onSelect?: (e: Event) => voidx{lang="ts-type"} (Edición española) - x
children?: NavigationMenuChildItem[]x{lang="ts-type"} (Edición española) - x
class?: anyx{lang="ts-type"} - x
ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingChipSize?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }x{lang="ts-type"}
Puede pasar cualquier propiedad del componente Link como to, target, etc.
<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>También puede pasar una matriz de matrices al soporte
items para mostrar grupos de elementos.Cada elemento puede tomar una matriz
children de objetos con las siguientes propiedades para crear submenús:- x
label: string(Edición española) - x
description?: string(Edición española) - x
icon?: string(Edición española) - x
onSelect?: (e: Event) => void - x
class?: any
Orientación
Utilice el prop orientation para cambiar la orientación del menú de navegación.
Cuando la orientación es
vertical, se utiliza un componente Accordion para mostrar cada grupo. Puede controlar el estado abierto de cada elemento mediante las propiedades open y defaultOpen y cambiar el comportamiento mediante los accesorios [collapsibleph274/docs/components/accordion#collapsible) y xph2777xtype](](/docs/components/accordion#multiple).Cuando la orientación es
vertical y el menú no es collapsed, los elementos secundarios se representan recursivamente como elementos, por lo que ui.link los estiliza. ui.childLink solo se aplica al content mostrado en la orientación horizontal y al popover cuando 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>Los grupos estarán espaciados cuando la orientación sea
horizontal y separados cuando la orientación sea vertical.Colapsado
En la orientación vertical, utilice el prop collapsed para contraer el menú de navegación, esto puede ser útil en una barra lateral, por ejemplo.
Puede utilizar los accesorios
tooltip y popover para mostrar más información sobre los elementos colapsados.<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>Destacado
Utilice el accesorio highlight para mostrar un borde resaltado para el elemento activo.
Utilice el prop highlight-color para cambiar el color del borde. Por defecto es el prop color.
<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>En este ejemplo, la clase
border-b se aplica para mostrar un borde en la orientación horizontal, esto no se hace de forma predeterminada para que pueda tener una pizarra limpia para trabajar.En la orientación
vertical, el soporte highlight solo resalta el borde de los niños activos.Color (Edición)
Utilice el prop color para cambiar el color del menú de navegación.
<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 (Edición española)
Utilice el prop variant para cambiar la variante del menú de navegación.
<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>El prop
highlight cambia el estilo de elemento activo variante pill. Pruébalo para ver la diferencia.XPH653xTrailing Icono de diseño
Utilice el prop trailing-icon para personalizar el final Icon de cada elemento. Por defecto i-lucide-chevron-down. Este icono sólo se muestra cuando un elemento tiene hijos.
También puede establecer un icono para un elemento específico mediante la propiedad
trailingIcon en el objeto elemento.<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>Flecha
Utilice el accesorio arrow para mostrar una flecha en el contenido del menú de navegación cuando los elementos tienen hijos.
<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>La flecha está animada para seguir el elemento activo.
Orientación de contenido
Utilice el accesorio content-orientation para cambiar la orientación del contenido.
Este accesorio solo funciona cuando
orientation es horizontal.<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>Unmount (Edición española)
Utilice el accesorio unmount-on-hide para controlar el comportamiento de desmontaje del contenido.
<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>Puede inspeccionar el DOM para ver el contenido de cada elemento que se representa.
Ejemplos
Control elemento activo
Puede controlar los elementos activos utilizando la directiva default-value o la directiva v-model con la directiva value del elemento. Si no se proporciona value, el valor predeterminado es item-${index} para elementos de nivel superior o item-${level}-${index} para elementos anidados.
<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>
Utilice el accesorio
value-key para cambiar la clave utilizada para hacer coincidir los elementos cuando se proporciona un v-model o default-value.En este ejemplo, aprovechando
defineShortcuts, puede cambiar el elemento activo pulsando: kbd{value="1"},: kbd{value="2"} o: kbd{value="3"}.With tooltip en los elementos
Cuando la orientación es vertical y el menú es collapsed, puede configurar el prop tooltip en true para mostrar un Tooltip alrededor de los elementos con su etiqueta, pero también puede usar la propiedad tooltip en cada elemento para anular la información sobre herramientas predeterminada. Puede utilizar la propiedad tooltip en cada elemento para mostrar un Tooltip alrededor de los elementos.
La propiedad
tooltip de un elemento siempre mostrará una información sobre herramientas, independientemente de la prop.Puede pasar cualquier propiedad del componente Tooltip de forma global o en cada elemento.
<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>Con popover en artículos
Cuando la orientación es vertical y el menú es collapsed, puede configurar el prop popover en true para mostrar un Popover alrededor de los elementos con sus hijos, pero también puede usar la propiedad popover en cada elemento para anular el popover predeterminado.
La propiedad
popover de un elemento siempre mostrará un popover independientemente del prop global popover.Puede pasar cualquier propiedad del componente Popover globalmente o en cada elemento.
<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>Puede utilizar la ranura
#content para personalizar el contenido del popover en la orientación vertical.Con chip en los artículos: badge{label="4.5+" class="align-text-top"}
Utilice la propiedad chip para mostrar un Chip alrededor del icono de los elementos, puede pasar cualquiera de sus accesorios.
<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>Con barra de pestañas inferior
Utilice el accesorio ui para transformar el menú de navegación en una barra de pestañas inferior de estilo móvil con iconos y etiquetas pequeñas, similar a YouTube o 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>
Con etiquetas colapsadas
Utilice el soporte ui para mostrar una etiqueta debajo de cada icono cuando se colapsa.
<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>
También puede hacer esto globalmente a través del
app.config.ts usando 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'
}
}]
}
}
})
Con ranura personalizada
Utilice la propiedad slot para personalizar un elemento específico.
Tendrás acceso a los siguientes slots:
- x
#{{ item.slot }}x{lang="ts-type"} - x
#{{ item.slot }}-leadingx{lang="ts-type"} - x
#{{ item.slot }}-labelx{lang="ts-type"} - x
#{{ item.slot }}-trailingx{lang="ts-type"} - x
#{{ item.slot }}-contentx{lang="ts-type"}
<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>
También puede utilizar las ranuras
#item, #item-leading, #item-label, #item-trailing y #item-content para personalizar todos los artículos.Con ranura trasera
Utilice la ranura #item-trailing o la propiedad slot (#{{ item.slot }}-trailing) para agregar un Menuxx](/docs/components/dropdown-menu) que aparece en el hover, similar a Notion o 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>
Con ranura de contenido
Utilice la ranura #item-content o la propiedad slot (#{{ item.slot }}-content) para personalizar el contenido de un elemento específico.
<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>
En este ejemplo, añadimos la clase
sm:w-(--reka-navigation-menu-viewport-width) en el viewport para tener un ancho dinámico.API
Accesorios
| 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 | {} |
Emisiones
| Event | Type |
|---|---|
update:modelValue | [value: NavigationMenuModelValue<K, O> | undefined] |
Theme
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 (Edición española)
No recent changes