Nuxt UI Pro v1.0 is out with dashboard components! Discount ends in 7 hours.

NavigationLinks

A list of links displayed in the NavigationTree.

Usage

This component is used internally by the NavigationTree.

<script setup lang="ts">
const links = [ {
  label: 'ContentSearch',
  to: '/pro/components/content-search',
  icon: 'i-heroicons-document-magnifying-glass'
}, {
  label: 'ContentSearchButton',
  to: '/pro/components/content-search-button',
  icon: 'i-heroicons-magnifying-glass',
  badge: 'New'
}, {
  label: 'ContentSurround',
  to: '/pro/components/content-surround',
  icon: 'i-heroicons-arrows-right-left'
}, {
  label: 'ContentToc',
  to: '/pro/components/content-toc',
  icon: 'i-heroicons-list-bullet'
}]
</script>

<template>
  <UNavigationLinks :links="links" />
</template>

Slots

badge
{ link: NavigationLink; }

Props

ui
{}
{}
links
NavigationLink[]
[]
level
number
0

Config

{
  wrapper: 'space-y-3',
  wrapperLevel: 'space-y-1.5',
  base: 'flex items-center gap-1.5 group',
  active: 'text-primary font-medium border-current',
  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 border-transparent hover:border-gray-500 dark:hover:border-gray-400',
  level: 'border-l -ml-px pl-4',
  icon: {
    base: 'w-5 h-5 flex-shrink-0'
  },
  badge: {
    base: 'rounded-full'
  },
  label: 'text-sm/6 truncate'
}