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

props
slots
scoped Slots
v-breadcrumbs
Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
divider
Default
'/'
Type
string

Specifies the dividing character

New in — v1.2
Name
items
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.

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

Align the breadcrumbs center

Deprecated in — v1.2
Name
justify-end
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.