VBreadcrumbs
The VBreadcrumbs component displays a navigational breadcrumb trail showing the user’s location within an application’s hierarchy. It supports both string and object items with full router integration.
Basic Usage
<template>
<v-breadcrumbs :items="items" />
</template>
<script setup>
const items = [
'Dashboard',
'Projects',
'My Project'
]
</script>
items
BreadcrumbItem[]
default:"[]"
Array of breadcrumb items. Each item can be a string or an object with title, href, to, disabled properties.
Character or string used to separate breadcrumb items.
CSS class applied to the active breadcrumb item.
Color applied to the active breadcrumb item.
Background color of the breadcrumbs container.
Text color applied to all breadcrumb items.
Disables all breadcrumb item interactions.
Icon displayed before the breadcrumb items.
density
'default' | 'comfortable' | 'compact'
Adjusts the vertical spacing of the component.
rounded
string | number | boolean
Applies border-radius to the component.
HTML tag used for the root element.
Item Object Structure
When using objects in the items array, the following properties are supported:
type BreadcrumbItem = {
title: string
disabled?: boolean
href?: string
to?: string | object
exact?: boolean
}
Slot for content before all breadcrumb items. Receives VIcon defaults when icon prop is set.
item
{ item: InternalBreadcrumbItem, index: number }
Slot to customize the entire breadcrumb item rendering.
title
{ item: InternalBreadcrumbItem, index: number }
Slot to customize the title content of each breadcrumb item.
divider
{ item: BreadcrumbItem, index: number }
Slot to customize the divider between breadcrumb items.
Default slot for additional content after all breadcrumb items.
Navigation Patterns
With Router Links
<template>
<v-breadcrumbs :items="items" />
</template>
<script setup>
const items = [
{ title: 'Dashboard', to: '/' },
{ title: 'Users', to: '/users' },
{ title: 'John Doe', disabled: true }
]
</script>
Custom Divider
<template>
<v-breadcrumbs
:items="items"
divider=">"
/>
</template>
With Icon
<template>
<v-breadcrumbs
:items="items"
icon="mdi-home"
/>
</template>
Custom Styling
<template>
<v-breadcrumbs
:items="items"
active-color="primary"
color="grey"
bg-color="surface"
rounded
/>
</template>
Examples
Disabled Items
The last breadcrumb item is automatically disabled by default:
<template>
<v-breadcrumbs :items="items" />
</template>
<script setup>
const items = [
{ title: 'Home', to: '/' },
{ title: 'Current Page' } // Automatically disabled
]
</script>
Custom Item Rendering
<template>
<v-breadcrumbs :items="items">
<template #title="{ item }">
<strong>{{ item.title }}</strong>
</template>
</v-breadcrumbs>
</template>
Custom Dividers
<template>
<v-breadcrumbs :items="items">
<template #divider>
<v-icon>mdi-chevron-right</v-icon>
</template>
</v-breadcrumbs>
</template>