---
description: Display a vertical navigation.
links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/VerticalNavigation.vue
---

## Usage

Pass an array to the `links` prop of the VerticalNavigation component. Each link can have the following properties:

- `label` - The label of the item.
- `icon` - The icon of the item.
- `iconClass` - The class of the icon of the item.
- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/elements/avatar) component.
- `badge` - A badge to display next to the label.
- `click` - The click handler of the item.

You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.

::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>
```
::

## Props

:component-props

## Preset

:component-preset