NavigationAccordion - Nuxt UI Pro

Usage

This component is used internally by the NavigationTree.

<script setup lang="ts">
const links = [{
  label: 'Getting Started',
  icon: 'i-heroicons-book-open',
  children: [{
    label: 'Introduction',
    to: '/getting-started'
  }, {
    label: 'Installation',
    to: '/pro/getting-started/installation'
  }, {
    label: 'Theming',
    to: '/pro/getting-started/theming'
  }, {
    label: 'Structure',
    to: '/pro/getting-started/structure'
  }, {
    label: 'Content',
    to: '/pro/getting-started/content'
  }]
}]
</script>

<template>
  <UNavigationAccordion :links="links" />
</template>

Props

any

{}

defaultOpen

number | boolean

undefined

links

NavigationTree[]

[]

level

number

0

multiple

boolean

true

Config

{
  wrapper: 'w-full block',
  level: 'border-l border-gray-200 dark:border-gray-800 -ml-px pl-px hover:border-gray-300 dark:hover:border-gray-700',
  button: {
    base: 'flex items-center gap-1.5 group mb-3 w-full focus-visible:outline-primary',
    active: 'text-primary border-current',
    inactive: 'border-transparent',
    level: 'border-l -ml-px pl-4',
    icon: {
      base: 'w-5 h-5 flex-shrink-0'
    },
    trailingIcon: {
      name: 'i-heroicons-chevron-down-20-solid',
      base: 'w-5 h-5 ms-auto transform transition-transform duration-200 flex-shrink-0 mr-1.5',
      active: 'text-gray-700 dark:text-gray-200',
      inactive: 'text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 -rotate-90'
    },
    label: 'text-sm/6 font-semibold truncate'
  },
  tree: 'border-l border-gray-200 dark:border-gray-800'
}

Main

A <main> component to fill the screen.

NavigationLinks

A list of links displayed in the NavigationTree.