Vertical Navigation

Usage

<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

<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

Prop	Default	Description
`links`	`[]`	`{ to?: RouteLocationRaw; exact?: boolean; label: string; icon?: string; iconClass?: string; avatar?: Partial<Avatar>; click?: Function; badge?: string \| number; }[]`
`ui`	`appConfig.ui.verticalNavigation`	`any`

Preset

{
  "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 ml-auto inline-block py-0.5 px-2 text-xs rounded-md -mr-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"
  }
}