mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-19 06:21:46 +01:00
63 lines
1.4 KiB
Markdown
63 lines
1.4 KiB
Markdown
---
|
|
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
|