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>
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 truncate">
{{ 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
{}config.default.divider[]Config
{
wrapper: 'relative min-w-0',
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',
},
}