0 Tk

NavigationTree

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: {}
}