Overview
Breadcrumbs help understand the hierarchy among levels and a user's location in it. We often use breadcrumbs to aid navigation across channels, topic trees, and resources.
Breadcrumbs take the full width of their container. When there is not enough space available, items that can't be displayed will automatically collapse into the drop-down and visible items might also get truncated:
When there is only one item, it won't be displayed by default. You can set
showSingleItem
to true
to show it:
Placement
- Directly above the content to be navigated through
Guidelines
- It should include the current item
- The current item can be repeated in a page header
- Allow the single breadcrumb (
showSingleItem=true
) only when there isn't any other page header or label that shows what the current level is
Props
Name | Description | Type | Default | Required |
---|---|---|---|---|
items | An array of objects, each with a text attribute (String) and a
link attribute (vue router link object). The link attribute
of the last item in the array is optional and ignored. | array | — | true |
showSingleItem | By default, the breadcrums will be hidden when the length of items is 1.
When set to true , a breadcrumb will be shown even when there is only one. | boolean |
false
| — |