mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-17 13:38:07 +01:00
91 lines
1.7 KiB
Markdown
91 lines
1.7 KiB
Markdown
---
|
|
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>
|
|
```
|
|
::
|
|
|
|
## Themes
|
|
|
|
Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
|
|
|
|
### Tailwind
|
|
|
|
::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
|