Breadcrumbs

The v-breadcrumbs component is a navigational helper for pages. It can accept a Material Icons icon or text characters as a divider. An array of objects can be passed to the items property of the component. Additionally, a scoped slot exists for more control of the breadcrumbs, either utilizing v-breadcrumbs-item or other custom markup.

Usage

By default, breadcrumbs use a text divider. This can be any string.

API

v-breadcrumbs
Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
divider
Default
'/'
Type
string

Specifies the dividing character

Name
items New in — v1.2
Default
[]
Type
array

An array of objects describing each breadcrumb. See v-breadcrumbs-item API section for all object properties. Use text property for the breadcrumb text.

Name
justify-center Deprecated in — v1.2
Default
false
Type
boolean

Align the breadcrumbs center

Name
justify-end Deprecated in — v1.2
Default
false
Type
boolean

Align the breadcrumbs at the end

Name
large
Default
false
Type
boolean

Increase the font-size of the breadcrumb item text

Name
light
Default
false
Type
boolean

Applies the light theme variant

Examples

Icon dividers

For the icon variant, breadcrumbs can use any icon in Material Design Icons.

Item slot

You can use the scoped item slot to customize each breadcrumb.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore