NavigationTree - Nuxt UI Pro

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

DeepPartial<{ wrapper: string; accordion: {}; links: {}; }>

{}

level

number

0

links

NavigationTree[]

[]

defaultOpen

number | boolean

undefined

multiple

boolean

true

Config

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

NavigationLinks

A list of links displayed in the NavigationTree.

Page

A dynamic grid layout for your pages.