Breadcrumbs

Breadcrumb components are UI elements that display a navigational trail, helping users understand and traverse the hierarchy or path within a website or application.

Expand code


<Breadcrumbs>
  <a href={'/docs'}>Documentation</a>
  <a href={'/docs/components'}>Components</a>
  <span>Breadcrumbs</span>
</Breadcrumbs>

HighlightLast

Use the highlightLast prop to add additional styling for the last entry.

Expand code


<Breadcrumbs highlightLast>
  <a href={'/docs'}>Documentation</a>
  <a href={'/docs/components'}>Components</a>
  <span>Breadcrumbs</span>
</Breadcrumbs>

Separator

The separator between the breadcrumb elements can be freely customized.

Expand code


<Breadcrumbs separator={'-'}>
  <a href={'/docs'}>Documentation</a>
  <a href={'/docs/components'}>Components</a>
  <span>Breadcrumbs</span>
</Breadcrumbs>
 
<Breadcrumbs separator={icon}>
  <a href={'/docs'}>Documentation</a>
  <a href={'/docs/components'}>Components</a>
  <span>Breadcrumbs</span>
</Breadcrumbs>

Collapsed breadcrumbs

The maxEntries prop determines how many elements can be visible before they are collapsed.
By default, the limit is set to five.

Expand code


<Breadcrumbs>
  <span>Documentation</span>
  <span>Foo</span>
  <span>Bar</span>
  <span>Lorem</span>
  <span>Ipsum</span>
  <span>Components</span>
  <span>Breadcrumbs</span>
</Breadcrumbs>

Collapsed customization

By default, if the breadcrumbs component is in collapsed state, the first element and the last two elements will still be visible. Use the beforeCollapse & afterCollapse props to change the default behaviour.

Expand code


<Breadcrumbs beforeCollapse={3} afterCollapse={1}>
  <span>Documentation</span>
  <span>Foo</span>
  <span>Bar</span>
  <span>Lorem</span>
  <span>Ipsum</span>
  <span>Components</span>
  <span>Breadcrumbs</span>
</Breadcrumbs>

Props

Name	Type	Default	Description
afterCollapse	`number`	2	Number of elements after the collapse
aria-label	`string`	-	Adds the `aria-label` attribute for the `<nav/>` element wrapping the breadcrumbs
beforeCollapse	`number`	1	Number of elements before the collapse
children	`node`	-	Content of the component
dark	`boolean`	false	Use the darkmode style
expandButtonLabel	`string`	expand	Sets the aria-label attribute of the collapse button
highlightLast	`boolean`	false	Highlights the last element of the breadcrumbs
maxEntries	`number`	5	Number of total elements before collapsing takes effect
separator	`node`	”/“	Customizes the separator