Navigation

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.
  • icon - The icon of the link.
  • iconClass - The class of the icon link.

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

<script setup>
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.

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

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>
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>
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>
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",
  "base": "flex items-center gap-x-1.5 group font-semibold",
  "icon": {
    "base": "flex-shrink-0 w-4 h-4",
    "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"
  }
}