Usage
This component is used internally in the #center slot of the Header component.
<script setup lang="ts">
const links = [{
label: 'Docs',
icon: 'i-heroicons-book-open',
to: '/getting-started'
}, {
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro',
children: [{
label: 'Pricing',
to: '/pro/pricing',
icon: 'i-heroicons-ticket',
description: 'A simple pricing, for solo developers or teams.'
}, {
label: 'Templates',
to: '/pro/templates',
icon: 'i-heroicons-computer-desktop',
description: 'Get started with one of our official templates.'
}]
}, {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: '/releases'
}]
</script>
<template>
<UHeaderLinks :links="links" />
</template>
Props
ui
any
{}links
HeaderLink[]
[]Config
{
wrapper: 'flex items-center gap-x-8',
base: 'text-sm/6 font-semibold flex items-center gap-1',
active: 'text-primary',
inactive: 'hover:text-primary',
trailingIcon: {
name: 'i-heroicons-chevron-down-20-solid',
base: 'w-5 h-5 transform transition-transform duration-200 flex-shrink-0',
active: 'rotate-180',
inactive: ''
},
externalIcon: {
name: 'i-heroicons-arrow-up-right-20-solid',
base: 'w-3 h-3 absolute top-0.5 -right-3.5 text-gray-400 dark:text-gray-500'
},
default: {
popover: {
mode: 'hover',
openDelay: 0,
ui: {
width: 'max-w-[16rem]'
}
}
}
}