Skip to content
Home

Breadcrumb

Info
Demos
Properties
Events

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.

Code Editor
// 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',
  },
]
render(<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.

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

Multiple Breadcrumb with children

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

Code Editor
<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.

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

Setting property 'variant' and overriding 'isCollapsed'

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