Breadcrumb

Description

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

Demos

Multiple Breadcrumb (recommended)

To ensure the 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.

() => {
// You can also import pages from a store and only do a remapping
const pages = [
{
text: "",
href: "/",
},
{
text: "UI Library",
href: "/uilib",
},
{
text: "Components",
href: "/uilib/components",
},
{
text: "Breadcrumbs",
href: "/uilib/components/breadcrumbs"
}
];
return (
<Breadcrumb data={pages} spacing />
)
}

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 nor children is present.

<Breadcrumb
onClick={() => {
console.log('Going back!')
}}
/>

Multiple Breadcrumb with children

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

<Breadcrumb spacing>
<Breadcrumb.Item onClick={() => {console.log("go home!")}} variant="home" />
<Breadcrumb.Item text="Page item" onClick={() => {console.log("go to page 1")}} />
<Breadcrumb.Item text="Page item" onClick={() => {console.log("go to page 2")}} variant="current" />
</Breadcrumb>

Setting property 'variant'

Property variant is by 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.

() => {
const pages = [
{
text: "",
href: "/",
},
{
text: "UI Library",
href: "/uilib",
},
{
text: "Components",
href: "/uilib/components",
}
];
return (
// Try changing variant here
<Breadcrumb variant="collapse" data={pages} spacing />
)
}

Setting property 'variant' and overriding 'isCollapsed'

() => {
const pages = [
{
text: "",
href: "/",
},
{
text: "UI Library",
href: "/uilib",
},
{
text: "Components",
href: "/uilib/components",
}
];
return (
<Breadcrumb variant="collapse" data={pages} isCollapsed={false} spacing />
)
}