A ready to use links tree to navigate between pages.
Pass a tree of links with their children to the links
prop, this will automatically create an accordion when there are children or display a simple link otherwise:
Use the
mapContentNavigation
util to transform@nuxt/content
navigation into@nuxt/ui-pro
links.
<script lang="ts" setup>
import type { NavItem } from '@nuxt/content'
const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))
</script>
<template>
<UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open />
</template>
You can disallow multiple accordion items to be open at the same time by setting the multiple
prop to false
(defaults to true
):
<template>
<UNavigationTree :links="links" :multiple="false" />
</template>
You can set the default-open
prop to true
to automatically open the tree matching the current route (defaults to false
):
<template>
<UNavigationTree :links="links" default-open />
</template>
You’ll usually use this component in an Aside component or in the #panel
slot of an Header:
layouts/docs.vue
<template>
<UContainer>
<UPage>
<template #left>
<UAside>
<UNavigationTree :links="mapContentNavigation(navigation)" />
</UAside>
</template>
<slot />
</UPage>
</UContainer>
</template>
components/Header.vue
<template>
<UHeader :links="links">
<template #logo>
<Logo class="w-auto h-6" />
</template>
<template #right>
<UColorModeButton />
</template>
<template #panel>
<UNavigationTree :links="mapContentNavigation(navigation)" default-open :multiple="false" />
</template>
</UHeader>
</template>
ui
- DeepPartial<{ wrapper: string; accordion: {}; links: {}; }>
{}
defaultOpen
- number | boolean
undefined
links
- NavigationTree[]
[]
level
- number
0
multiple
- boolean
true
{
wrapper: 'space-y-3',
accordion: {},
links: {}
}