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, slots exists for more control of the breadcrumbs, either utilizing v-breadcrumbs-item or other custom markup.
By default v-breadcrumbs will disable all crumbs up to the current page in a nested paths. You can prevent this behavior by using exact: true on each applicable breadcrumb in the items array.
By default, breadcrumbs use a text divider. This can be any string.
Select your desired component from below and see the available props, slots, events and functions.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Specifies the dividing character between items.
An array of objects for each breadcrumb.
Increase the font-size of the breadcrumb item text to 16px (14px default).
Applies the light theme variant to the component.
Below is a collection of simple to complex examples.
Large breadcrumbs have larger font size.
Breadcrumbs separator can be set using divider property.
For the icon variant, breadcrumbs can use any icon in Material Design Icons.
You can use the item slot to customize each breadcrumb.
Ready for more? Continue reading with: