Breadcrumbs
The 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 Breadcrumbs-item or other custom markup.
info
For more details about Vuetify’s usage of Breadcrumbs component, click Breadcrumbs page.
For more prop explanations, click Vuetify Breadcrumbs API page.
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| divider | Specifies the dividing character between items. | string | false |
| dark | Applies the dark theme. | boolean | false |
| items | An array of objects for each breadcrumb. | array | [] |
| large | Increase the font-size of the breadcrumb item text to 16px (14px default). | boolean | false |
| tabIndex | Determines the order of switching from one component to another with the tab key. | string | undefined |
| visible | Visibility of Breadcrumbs component. | boolean | true |
Slots
| Attribute | Description |
|---|---|
| default | The default Vue slot. |
| divider | The slot used for dividers. |
| item | The slot used to override default Breadcrumbs-item behavior when using the items prop. |
Samples Component
