Nuxt UI Pro v1.0 is out with dashboard components!

NavigationTree

A ready to use links tree to navigate between pages.

Usage

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>

Multiple

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>

Default open

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>

Props

ui
{}
{}
links
NavigationTree[]
[]
defaultOpen
number | boolean
undefined
level
number
0
multiple
boolean
true

Config

{
  wrapper: 'space-y-3',
  accordion: {},
  links: {}
}