---
github: true
description: Display a vertical navigation.
---

## Usage

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

#code
```vue
<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
```vue
<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