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:
Links to intermediary items can be disabled by omitting the
link attribute, or making it falsey.
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. The link
attribute can be set to null which will render the breadcrumb only
as text, regardless of its position in the breadcrumb. | 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
| — |