Nuxt UI Pro v1.0 is out with dashboard components! Discount ends 16 hours ago.

HeaderLinks

A list of links displayed in the Header.

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-credit-card',
    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

links
HeaderLink[]
[]
ui
any
{}

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]'
      }
    }
  }
}