Nuxt UI Pro v1.0 is out with dashboard components!

Components

Breadcrumb

A list of links that indicate the current page's location within a navigational hierarchy.

Usage

Pass an array to the links prop of the Breadcrumb 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.

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

<script setup lang="ts">
const links = [{
  label: 'Home',
  icon: 'i-heroicons-home',
  to: '/'
}, {
  label: 'Navigation',
  icon: 'i-heroicons-square-3-stack-3d'
}, {
  label: 'Breadcrumb',
  icon: 'i-heroicons-link'
}]
</script>

<template>
  <UBreadcrumb :links="links" />
</template>
A span will be rendered instead of a link when the to property is not defined.

Divider

Use the divider prop to customize the divider between each link, it can be an icon or a string. You can change it globally in ui.breadcrumb.default.divider. Defaults to i-heroicons-chevron-right-20-solid.

You can set the prop to null to hide the divider. Additionally, you can customize it using the divider slot.

<template>
  <UBreadcrumb
    divider="/"
    :links="[{ label: 'Home', to: '/' }, { label: 'Navigation' }, { label: 'Breadcrumb' }]"
  />
</template>

Slots

default

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

<script setup lang="ts">
const links = [{
  label: 'Home',
  to: '/'
}, {
  label: 'Navigation'
}, {
  label: 'Breadcrumb'
}]
</script>

<template>
  <UBreadcrumb :links="links">
    <template #default="{ link, isActive, index }">
      <UBadge :color="isActive ? 'primary' : 'gray'" class="rounded-full">
        {{ index + 1 }}. {{ link.label }}
      </UBadge>
    </template>
  </UBreadcrumb>
</template>

icon

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

<script setup lang="ts">
const links = [{
  label: 'Home',
  to: '/'
}, {
  label: 'Navigation'
}, {
  label: 'Breadcrumb'
}]
</script>

<template>
  <UBreadcrumb :links="links" :divider="null" :ui="{ ol: 'gap-x-3' }">
    <template #icon="{ link, index, isActive }">
      <UAvatar
        :alt="(index + 1 ).toString()"
        :ui="{
          background: isActive ? 'bg-primary-500 dark:bg-primary-400' : undefined,
          placeholder: isActive ? 'text-white dark:text-gray-900' : !!link.to ? 'group-hover:text-gray-700 dark:group-hover:text-gray-200' : ''
        }"
        size="xs"
      />
    </template>
  </UBreadcrumb>
</template>

divider

Use the divider slot to customize the divider of the Breadcrumb.

<script setup lang="ts">
const links = [{
  label: 'Home',
  icon: 'i-heroicons-home',
  to: '/'
}, {
  label: 'Navigation',
  icon: 'i-heroicons-square-3-stack-3d'
}, {
  label: 'Breadcrumb',
  icon: 'i-heroicons-link'
}]
</script>

<template>
  <UBreadcrumb :links="links" :ui="{ ol: 'gap-x-3', li: 'gap-x-3' }">
    <template #divider>
      <span class="w-8 h-1 rounded-full bg-gray-300 dark:bg-gray-700" />
    </template>
  </UBreadcrumb>
</template>

Props

ui
{}
{}
divider
string
config.default.divider
links
BreadcrumbLink[]
[]

Config

{
  wrapper: 'relative',
  ol: 'flex items-center gap-x-1.5',
  li: 'flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm leading-6 min-w-0',
  base: 'flex items-center gap-x-1.5 group font-semibold min-w-0',
  label: 'block truncate',
  icon: {
    base: 'flex-shrink-0 w-5 h-5',
    active: '',
    inactive: '',
  },
  divider: {
    base: 'flex-shrink-0 w-5 h-5',
  },
  active: 'text-primary-500 dark:text-primary-400',
  inactive: ' hover:text-gray-700 dark:hover:text-gray-200',
  default: {
    divider: 'i-heroicons-chevron-right-20-solid rtl:i-heroicons-chevron-left-20-solid',
  },
}