Breadcrumb

Description

The Breadcrumb is a component for navigation and for showing the current website path or tree.

Demos

Multiple Breadcrumb (recommended)

To ensure correct use of the Breadcrumb, we recommend passing down pages as a variable to data. If you have other specific cases, check out how to customize with children in Multiple Breadcrumb.

Some extra functionality is provided to this variant:

  • The first item, Home, gets assigned a home icon and an appropriate text label based on the current locale.
  • The last item in pages will be static text, corresponding to the current page.
  • Another variant, collapse, appears for small screens.

Single Breadcrumb

When you only want a single button for back, this variant is recommended and default when neither data or children is present.

Multiple Breadcrumb with children

For customizing the Breadcrumb to fit your needs, this variant can be utilized.

Setting property 'variant'

Property variant is default set based on the combination of children and data properties, and also screen size. If you want to override this property, pass in the prop variant to be either single, multiple, or collapse.

Setting property 'variant' and overriding 'isCollapsed'