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.


  • Directly above the content to be navigated through


  • 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


Name Description Type Default Required
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
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