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

HeaderPopoverLinks

A list of links displayed in a header Popover.

Usage

This component is used internally in the #panel slot of the HeaderLinks component.

<script setup lang="ts">
const links = [{
  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: 'Getting Started',
  to: '/pro/getting-started',
  icon: 'i-heroicons-book-open',
  description: 'Learn how to use Nuxt UI Pro in your app.'
}, {
  label: 'Components',
  to: '/pro/components',
  icon: 'i-heroicons-cube',
  description: 'Discover all the components available in Nuxt UI Pro.'
}]
</script>

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

Props

links
HeaderPopoverLink[]
[]
ui
any
{}

Config

{
  wrapper: 'p-2 space-y-1',
  base: 'block px-2 py-1.5 rounded-md flex items-start gap-1.5',
  active: 'bg-gray-100/50 dark:bg-gray-800/50 text-primary',
  inactive: 'hover:bg-gray-100/50 dark:hover:bg-gray-800/50',
  label: 'font-semibold text-sm/6 inline-block relative',
  description: 'text-sm leading-snug text-gray-500 dark:text-gray-400 line-clamp-2',
  icon: {
    base: 'w-4 h-4 flex-shrink-0 mt-1'
  },
  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'
  }
}