---
title: VerticalNavigation
description: Display a vertical navigation.
links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/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 link.
- `icon` - The icon of the link.
- `iconClass` - The class of the icon of the link.
- `avatar` - The avatar of the link. 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 link.

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{component="vertical-navigation-example"}

::callout{icon="i-heroicons-light-bulb"}
Learn how to build a Tailwind like vertical navigation in the [Examples](/getting-started/examples#verticalnavigation) page.
::

## Slots

You can use slots to customize links display.

### `default`

Use the `#default` slot to customize the link label. You will have access to the `link` and `isActive` properties in the slot scope.

:component-example{component="vertical-navigation-example-default-slot"}

### `avatar`

Use the `#avatar` slot to customize the link avatar. You will have access to the `link` and `isActive` properties in the slot scope.

:component-example{component="vertical-navigation-example-avatar-slot"}

### `icon`

Use the `#icon` slot to customize the link icon. You will have access to the `link` and `isActive` properties in the slot scope.

:component-example{component="vertical-navigation-example-icon-slot"}

### `badge`

Use the `#badge` slot to customize the link badge. You will have access to the `link` and `isActive` properties in the slot scope.

:component-example{component="vertical-navigation-example-badge-slot"}

## Props

:component-props

## Preset

:component-preset