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
DeepPartial<{ wrapper: string; wrapperLevel: string; base: string; active: string; inactive: string; level: string; icon: { base: string; }; badge: { base: string; }; label: string; }>
{}links
NavigationLink[]
[]level
number
0Config
{
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'
}