Usage
The Breadcrumb component provides navigational context by showing the user’s location within the site’s hierarchy. It supports icons, avatars, and custom separators.
Basic Example
<template>
<UBreadcrumb :items="items" />
</template>
<script setup>
const items = [
{ label: 'Home', to: '/' },
{ label: 'Products', to: '/products' },
{ label: 'Electronics', to: '/products/electronics' },
{ label: 'Laptop' }
]
</script>
With Icons
<template>
<UBreadcrumb :items="items" />
</template>
<script setup>
const items = [
{ label: 'Home', icon: 'i-lucide-home', to: '/' },
{ label: 'Settings', icon: 'i-lucide-settings', to: '/settings' },
{ label: 'Profile', icon: 'i-lucide-user' }
]
</script>
With Avatars
<template>
<UBreadcrumb :items="items" />
</template>
<script setup>
const items = [
{ label: 'Home', to: '/' },
{ label: 'Team', to: '/team' },
{
label: 'John Doe',
avatar: { src: 'https://avatar.vercel.sh/johndoe' }
}
]
</script>
Custom Separator
<template>
<UBreadcrumb :items="items" separator-icon="i-lucide-chevron-right" />
</template>
<script setup>
const items = [
{ label: 'Home', to: '/' },
{ label: 'Products', to: '/products' },
{ label: 'Details' }
]
</script>
Active State
<template>
<UBreadcrumb :items="items" />
</template>
<script setup>
const items = [
{ label: 'Home', to: '/' },
{ label: 'Products', to: '/products', active: true },
{ label: 'Details' }
]
</script>
API
Props
Array of breadcrumb items to display.
The element or component this component should render as.
separatorIcon
string
default:"appConfig.ui.icons.chevronRight"
The icon to use as a separator. Supports Iconify icons.
The key used to get the label from the item.
Additional CSS classes to apply to the root element.
Custom UI configuration for slots.
BreadcrumbItem
The text label for the breadcrumb item.
An Iconify icon name to display before the label.
Avatar configuration to display before the label.
Navigation target. Can be a URL string or route location object.
Whether this item is active. The last item is automatically considered active.
Whether the item is disabled.
Custom slot name for this item.
Additional CSS classes for the item.
Custom UI configuration for this item’s slots.
Slots
item
Customize the entire item content.
<template>
<UBreadcrumb :items="items">
<template #item="{ item, index, active, ui }">
<span :class="{ 'font-bold': active }">
{{ item.label }}
</span>
</template>
</UBreadcrumb>
</template>
item-leading
Customize the leading icon or avatar.
<template>
<UBreadcrumb :items="items">
<template #item-leading="{ item, index, active, ui }">
<UIcon :name="item.icon" :class="{ 'text-primary': active }" />
</template>
</UBreadcrumb>
</template>
item-label
Customize just the label portion.
<template>
<UBreadcrumb :items="items">
<template #item-label="{ item, index, active }">
<span class="uppercase">{{ item.label }}</span>
</template>
</UBreadcrumb>
</template>
item-trailing
Add content after the label.
<template>
<UBreadcrumb :items="items">
<template #item-trailing="{ item, index, active }">
<UBadge v-if="item.badge" :label="item.badge" />
</template>
</UBreadcrumb>
</template>
separator
Customize the separator between items.
<template>
<UBreadcrumb :items="items">
<template #separator="{ ui }">
<span class="mx-2">/</span>
</template>
</UBreadcrumb>
</template>
Dynamic Slots
You can use dynamic slots based on the slot property of items:
<template>
<UBreadcrumb :items="items">
<template #home-leading="{ item, index, active, ui }">
<UIcon name="i-lucide-home" />
</template>
<template #home-label="{ item, index, active }">
Home
</template>
</UBreadcrumb>
</template>
<script setup>
const items = [
{ slot: 'home', to: '/' },
{ label: 'Products', to: '/products' },
{ label: 'Details' }
]
</script>