ContentNavigation
Usage
Use the navigation prop with the navigation value you get when fetching the navigation of your app.
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</script>
<template>
<UContentNavigation :navigation="navigation" highlight />
</template>
Type
Set the type prop to single to only allow one item to be open at a time. Defaults to multiple.
<script setup lang="ts">
const navigation = ref([
{
title: 'Guide',
icon: 'i-lucide-book-open',
path: '#getting-started',
children: [
{
title: 'Introduction',
path: '#introduction',
active: true
},
{
title: 'Installation',
path: '#installation'
}
]
},
{
title: 'Composables',
icon: 'i-lucide-database',
path: '#composables',
children: [
{
title: 'defineShortcuts',
path: '#defineshortcuts'
},
{
title: 'useModal',
path: '#usemodal'
}
]
}
])
</script>
<template>
<UContentNavigation type="single" />
</template>
Color
Use the color prop to change the color of the navigation links.
<script setup lang="ts">
const navigation = ref([
{
title: 'Guide',
icon: 'i-lucide-book-open',
path: '#getting-started',
children: [
{
title: 'Introduction',
path: '#introduction',
active: true
},
{
title: 'Installation',
path: '#installation'
}
]
},
{
title: 'Composables',
icon: 'i-lucide-database',
path: '#composables',
children: [
{
title: 'defineShortcuts',
path: '#defineshortcuts'
},
{
title: 'useModal',
path: '#usemodal'
}
]
}
])
</script>
<template>
<UContentNavigation color="neutral" />
</template>
Variant
Use the variant prop to change the variant of the navigation links.
<script setup lang="ts">
const navigation = ref([
{
title: 'Guide',
icon: 'i-lucide-book-open',
path: '#getting-started',
children: [
{
title: 'Introduction',
path: '#introduction',
active: true
},
{
title: 'Installation',
path: '#installation'
}
]
},
{
title: 'Composables',
icon: 'i-lucide-database',
path: '#composables',
children: [
{
title: 'defineShortcuts',
path: '#defineshortcuts'
},
{
title: 'useModal',
path: '#usemodal'
}
]
}
])
</script>
<template>
<UContentNavigation variant="link" />
</template>
Highlight
Use the highlight prop to display a highlighted border for the active link.
Use the highlight-color prop to change the color of the border. It defaults to the color prop.
<script setup lang="ts">
const navigation = ref([
{
title: 'Guide',
icon: 'i-lucide-book-open',
path: '#getting-started',
children: [
{
title: 'Introduction',
path: '#introduction',
active: true
},
{
title: 'Installation',
path: '#installation'
}
]
},
{
title: 'Composables',
icon: 'i-lucide-database',
path: '#composables',
children: [
{
title: 'defineShortcuts',
path: '#defineshortcuts'
},
{
title: 'useModal',
path: '#usemodal'
}
]
}
])
</script>
<template>
<UContentNavigation highlight highlight-color="primary" color="primary" variant="pill" />
</template>
Trailing Icon
<script setup lang="ts">
const navigation = ref([
{
title: 'Guide',
icon: 'i-lucide-book-open',
path: '#getting-started',
children: [
{
title: 'Introduction',
path: '#introduction',
active: true
},
{
title: 'Installation',
path: '#installation'
}
]
},
{
title: 'Composables',
icon: 'i-lucide-database',
path: '#composables',
children: [
{
title: 'defineShortcuts',
path: '#defineshortcuts'
},
{
title: 'useModal',
path: '#usemodal'
}
]
}
])
</script>
<template>
<UContentNavigation trailing-icon="i-lucide-arrow-up" />
</template>
Examples
Within a layout
Use the ContentNavigation component inside a PageAside component within a layout to display the navigation of the page:
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</script>
<template>
<UPage>
<template #left>
<UPageAside>
<UContentNavigation :navigation="navigation" highlight />
</UPageAside>
</template>
<slot />
</UPage>
</template>
Within a header
Use the ContentNavigation component inside the content slot of a Header component to display the navigation of the page on mobile:
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</script>
<template>
<UHeader>
<template #body>
<UContentNavigation :navigation="navigation" highlight />
</template>
</UHeader>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
defaultOpen |
|
When |
trailingIcon |
|
The icon displayed to toggle the accordion. |
color |
|
|
variant |
|
|
highlight |
|
Display a line next to the active link. |
highlightColor |
|
|
collapsible |
|
When type is "single", prevents closing the open item when clicking its trigger. When type is "multiple", disables the collapsible behavior. |
level |
|
|
navigation |
| |
disabled |
|
When |
type |
|
Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from |
unmountOnHide |
|
When |
ui |
|
Slots
| Slot | Type |
|---|---|
link |
|
link-leading |
|
link-title |
|
link-trailing |
|
Emits
| Event | Type |
|---|---|
update:modelValue |
|
Theme
export default defineAppConfig({
ui: {
contentNavigation: {
slots: {
root: '',
content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
list: 'isolate -mx-2.5 -mt-1.5',
item: '',
listWithChildren: 'ms-5 border-s border-default',
itemWithChildren: 'flex flex-col data-[state=open]:mb-1.5',
trigger: 'font-semibold',
link: 'group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
linkLeadingIcon: 'shrink-0 size-5',
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
linkTrailingBadge: 'shrink-0',
linkTrailingBadgeSize: 'sm',
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
linkTitle: 'truncate',
linkTitleExternalIcon: 'size-3 align-top text-dimmed'
},
variants: {
color: {
primary: {
trigger: 'focus-visible:ring-primary',
link: 'focus-visible:before:ring-primary'
},
secondary: {
trigger: 'focus-visible:ring-secondary',
link: 'focus-visible:before:ring-secondary'
},
success: {
trigger: 'focus-visible:ring-success',
link: 'focus-visible:before:ring-success'
},
info: {
trigger: 'focus-visible:ring-info',
link: 'focus-visible:before:ring-info'
},
warning: {
trigger: 'focus-visible:ring-warning',
link: 'focus-visible:before:ring-warning'
},
error: {
trigger: 'focus-visible:ring-error',
link: 'focus-visible:before:ring-error'
},
neutral: {
trigger: 'focus-visible:ring-inverted',
link: 'focus-visible:before:ring-inverted'
}
},
highlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
pill: '',
link: ''
},
active: {
true: {
link: 'font-medium'
},
false: {
link: 'text-muted',
linkLeadingIcon: 'text-dimmed'
}
},
disabled: {
true: {
trigger: 'data-[state=open]:text-highlighted'
}
},
highlight: {
true: {}
},
level: {
true: {
item: 'ps-1.5 -ms-px',
itemWithChildren: 'ps-1.5 -ms-px'
}
}
},
compoundVariants: [
{
highlight: true,
level: true,
class: {
link: [
'after:absolute after:-left-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 data-[state=open]:text-highlighted',
'transition-colors before:transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default group-data-[state=open]:text-default',
'transition-colors'
]
}
},
{
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 data-[state=open]:text-highlighted',
'transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default group-data-[state=open]:text-default',
'transition-colors'
]
}
},
{
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'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
contentNavigation: {
slots: {
root: '',
content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
list: 'isolate -mx-2.5 -mt-1.5',
item: '',
listWithChildren: 'ms-5 border-s border-default',
itemWithChildren: 'flex flex-col data-[state=open]:mb-1.5',
trigger: 'font-semibold',
link: 'group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
linkLeadingIcon: 'shrink-0 size-5',
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
linkTrailingBadge: 'shrink-0',
linkTrailingBadgeSize: 'sm',
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
linkTitle: 'truncate',
linkTitleExternalIcon: 'size-3 align-top text-dimmed'
},
variants: {
color: {
primary: {
trigger: 'focus-visible:ring-primary',
link: 'focus-visible:before:ring-primary'
},
secondary: {
trigger: 'focus-visible:ring-secondary',
link: 'focus-visible:before:ring-secondary'
},
success: {
trigger: 'focus-visible:ring-success',
link: 'focus-visible:before:ring-success'
},
info: {
trigger: 'focus-visible:ring-info',
link: 'focus-visible:before:ring-info'
},
warning: {
trigger: 'focus-visible:ring-warning',
link: 'focus-visible:before:ring-warning'
},
error: {
trigger: 'focus-visible:ring-error',
link: 'focus-visible:before:ring-error'
},
neutral: {
trigger: 'focus-visible:ring-inverted',
link: 'focus-visible:before:ring-inverted'
}
},
highlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
pill: '',
link: ''
},
active: {
true: {
link: 'font-medium'
},
false: {
link: 'text-muted',
linkLeadingIcon: 'text-dimmed'
}
},
disabled: {
true: {
trigger: 'data-[state=open]:text-highlighted'
}
},
highlight: {
true: {}
},
level: {
true: {
item: 'ps-1.5 -ms-px',
itemWithChildren: 'ps-1.5 -ms-px'
}
}
},
compoundVariants: [
{
highlight: true,
level: true,
class: {
link: [
'after:absolute after:-left-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 data-[state=open]:text-highlighted',
'transition-colors before:transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default group-data-[state=open]:text-default',
'transition-colors'
]
}
},
{
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 data-[state=open]:text-highlighted',
'transition-colors'
],
linkLeadingIcon: [
'group-hover:text-default group-data-[state=open]:text-default',
'transition-colors'
]
}
},
{
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'
}
}
}
})
]
})