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 - DeepPartial<{ wrapper: string; accordion: {}; links: {}; }>

  • Default: {}

• defaultOpen - number | boolean

  • Default: undefined

• links - NavigationTree[]

  • Default: []

• level - number

  • Default: 0

• multiple - boolean

  • Default: true

Config

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