VerticalNavigation

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 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 component such as to, exact, etc.

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

Learn how to build a Tailwind like vertical navigation in the Examples 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.

<script setup>const links = [{  label: 'Vertical Navigation',  to: '/navigation/vertical-navigation'}, {  label: 'Command Palette',  to: '/navigation/command-palette'}, {  label: 'Table',  to: '/data/table'}]</script><template>  <UVerticalNavigation :links="links">    <template #default="{ link }">      <span class="group-hover:text-primary relative">{{ link.label }}</span>    </template>  </UVerticalNavigation></template>

`avatar`

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

<script setup>const links = [{  avatar: {    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x',    alt: ''  },  label: 'benjamincanac',  to: 'https://github.com/benjamincanac',  target: '_blank'}, {  avatar: {    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux',    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x',    alt: ''  },  label: 'Atinux',  to: 'https://github.com/Atinux',  target: '_blank'}, {  avatar: {    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin',    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x',    alt: ''  },  label: 'smarroufin',  to: 'https://github.com/smarroufin',  target: '_blank'}]</script><template>  <UVerticalNavigation :links="links">    <template #avatar="{ link }">      <UAvatar        v-if="link.avatar"        v-bind="link.avatar"        size="3xs"        loading="lazy"      />      <UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />    </template>  </UVerticalNavigation></template>

`icon`

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

<script setup>const types = {  bug: {    icon: 'i-heroicons-bug-ant-20-solid',    color: 'text-red-500'  },  docs: {    icon: 'i-heroicons-document-text-20-solid',    color: 'text-blue-500'  },  lock: {    icon: 'i-heroicons-lock-closed-20-solid',    color: 'text-gray dark:text-white'  },  default: {    icon: 'i-heroicons-question-mark-circle-20-solid',    color: 'text-green-500'  }}const links = [{  label: 'UDropdown and UPopover dropdown menu, dropdown will be obscured',  type: 'bug'}, {  label: 'Uncaught (in promise) ReferenceError: ref is not defined',  type: 'lock'}, {  label: 'Fully styled and customizable components for Nuxt.',  type: 'docs'}, {  label: 'Can I pass a tailwind color to UNotifications with `toast.add()` ?'}]</script><template>  <UVerticalNavigation :links="links">    <template #icon="{ link }">      <UIcon v-if="link.type" :name="types[link.type].icon" :class="types[link.type].color" class="text-base" />      <UIcon v-else :name="types.default.icon" :class="types.default.color" class="text-base" />    </template>  </UVerticalNavigation></template>

`badge`

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

<script setup>const links = [{  label: '.github',  icon: 'i-heroicons-folder-20-solid',  badge: 'chore(github): use pnpm 8',  time: 'last month'}, {  label: '.editorconfig',  icon: 'i-heroicons-document-solid',  badge: 'Initial commit',  time: '2 years ago'}, {  label: '.package.json',  icon: 'i-heroicons-document-solid',  badge: 'chore(deps): bump',  time: '16 hours ago'}]</script><template>  <UVerticalNavigation    :links="links"    class="w-full"    :ui="{      label: 'truncate relative text-gray-900 dark:text-white flex-initial w-32 text-left'    }"  >    <template #badge="{ link }">      <div class="flex-1 flex justify-between relative truncate">        <div>{{ link.badge }}</div>        <div>{{ link.time }}</div>      </div>    </template>  </UVerticalNavigation></template>

Props

any

undefined

links

VerticalNavigationLink[]

[]

Config

UVerticalNavigation.vue

{  "wrapper": "relative",  "base": "group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75",  "ring": "focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",  "padding": "px-3 py-1.5",  "width": "w-full",  "rounded": "rounded-md",  "font": "font-medium",  "size": "text-sm",  "active": "text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800",  "inactive": "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50",  "label": "truncate relative",  "icon": {    "base": "flex-shrink-0 w-4 h-4",    "active": "text-gray-700 dark:text-gray-200",    "inactive": "text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"  },  "avatar": {    "base": "flex-shrink-0",    "size": "3xs"  },  "badge": {    "base": "relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5",    "active": "bg-white dark:bg-gray-900",    "inactive": "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900"  }}

Table

Display data in a table.

CommandPalette

Add a customizable command palette to your app.