HorizontalNavigation

Usage

Pass an array to the links prop of the HorizontalNavigation component. Each link can have the following properties:

label - The label of the link.
labelClass - The class of the link label.
icon - The icon of the link.
iconClass - The class of the link icon.
avatar - The avatar of the link. You can pass all the props of the Avatar component.
badge - A badge to display next to the label. You can pass all the props of the Badge component.
click - The click handler of the link.

You can also pass any property from the NuxtLink component such as to, exact, etc.

<script setup lang="ts">
const links = [{
  label: 'Profile',
  avatar: {
    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
  },
  badge: 100
}, {
  label: 'Installation',
  icon: 'i-heroicons-home',
  to: '/getting-started/installation'
}, {
  label: 'Horizontal Navigation',
  icon: 'i-heroicons-chart-bar',
  to: '/components/horizontal-navigation'
}, {
  label: 'Command Palette',
  icon: 'i-heroicons-command-line',
  to: '/components/command-palette'
}]
</script>

<template>
  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
</template>

Sections

Group your navigation links into distinct sections, they will be displayed apart thanks to a justify-between flexbox layout.

You can do this by passing an array of arrays to the links prop of the HorizontalNavigation component.

<script setup lang="ts">
const links = [
  [{
    label: 'Installation',
    icon: 'i-heroicons-home',
    to: '/getting-started/installation'
  }, {
    label: 'Horizontal Navigation',
    icon: 'i-heroicons-chart-bar',
    to: '/components/horizontal-navigation'
  }, {
    label: 'Command Palette',
    icon: 'i-heroicons-command-line',
    to: '/components/command-palette'
  }], [{
    label: 'Examples',
    icon: 'i-heroicons-light-bulb'
  }, {
    label: 'Help',
    icon: 'i-heroicons-question-mark-circle'
  }]
]
</script>

<template>
  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
</template>

Slots

You can use slots to customize links display.

`default`

Use the #default slot to customize the link label. You will have access to the link and isActive properties in the slot scope.

<script setup lang="ts">
const links = [{
  label: 'Horizontal Navigation',
  to: '/components/horizontal-navigation'
}, {
  label: 'Command Palette',
  to: '/components/command-palette'
}, {
  label: 'Table',
  to: '/components/table'
}]
</script>

<template>
  <UHorizontalNavigation :links="links">
    <template #default="{ link }">
      <span class="group-hover:text-primary relative">{{ link.label }}</span>
    </template>
  </UHorizontalNavigation>
</template>

`avatar`

Use the #avatar slot to customize the link avatar. You will have access to the link and isActive properties in the slot scope.

`icon`

Use the #icon slot to customize the link icon. You will have access to the link and isActive properties in the slot scope.

`badge`

Use the #badge slot to customize the link badge. You will have access to the link and isActive properties in the slot scope.

{ wrapper?: string; container?: string; inner?: string; base?: string; before?: string; after?: string; active?: string; inactive?: string; label?: string; icon?: DeepPartial<{ base: string; active: string; inactive: string; }, any>; avatar?: DeepPartial<...>; badge?: DeepPartial<...>; } & { ...; } & { ...; }

{}

links

HorizontalNavigationLink[] | HorizontalNavigationLink[][]

[]

Config

{
  wrapper: 'relative w-full flex items-center justify-between',
  container: 'flex items-center min-w-0',
  inner: 'min-w-0',
  base: 'group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
  before: 'before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
  after: 'after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2',
  active: 'text-gray-900 dark:text-white after:bg-primary-500 dark:after:bg-primary-400 after:rounded-full',
  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
  label: 'truncate relative',
  icon: {
    base: 'flex-shrink-0 w-5 h-5 relative',
    active: 'text-gray-700 dark:text-gray-200',
    inactive: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
  },
  avatar: {
    base: 'flex-shrink-0',
    size: '2xs'
  },
  badge: {
    base: 'flex-shrink-0 ms-auto relative rounded',
    color: 'gray',
    variant: 'solid',
    size: 'xs'
  }
}

FormGroup

Display a label and additional informations around a form element.

Icon

Add 200,000+ ready to use icons to your Nuxt application, based on Iconify.