ui/docs/content/5.navigation/1.vertical-navigation.md

github, description

github	description
true	Display a vertical navigation.

Usage

::component-example #default :vertical-navigation-example

#code

<script setup>
const links = [{
  label: 'Profile',
  avatar: {
    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
  },
  badge: 100
}, {
  label: 'Installation',
  icon: 'i-heroicons-home',
  to: '/getting-started/installation'
}, {
  label: 'Vertical Navigation',
  icon: 'i-heroicons-chart-bar',
  to: '/navigation/vertical-navigation'
}, {
  label: 'Command Palette',
  icon: 'i-heroicons-command-line',
  to: '/navigation/command-palette'
}]
</script>

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

::

Theme

Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.

::component-example #default :vertical-navigation-theme-tailwind #code

<script setup>
const links = [{
  label: 'Installation',
  to: '/getting-started/installation'
}, {
  label: 'Vertical Navigation',
  to: '/navigation/vertical-navigation'
}, {
  label: 'Command Palette',
  to: '/navigation/command-palette'
}]
</script>

<template>
  <UVerticalNavigation
    :links="links"
    :ui="{
      wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
      base: 'group block border-l -ml-px lg:leading-6',
      padding: 'pl-4',
      rounded: '',
      font: '',
      ring: '',
      active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
      inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
    }"
  />
</template>

::

Props

:component-props

Preset

:component-preset