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>
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
{}config.default.divider[]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"
}
}