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.
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.
[
{
disabled: boolean
exact: boolean
href: string
link: boolean
text: string | number
to: string | object
}
]Increase the font-size of the breadcrumb item text to 16px (14px default).
Applies the light theme variant to the component.
The default Vue slot.
The slot used for dividers.
The slot used to override default v-breadcrumbs-item behavior when using the items prop.
{
item: any[]
}0 12px !default;0 1 auto !default;14px !default;16px !default;0 !default;0 14px !default;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: