Skip to content
Home

Breadcrumb

Info
Demos
Properties
Events

Import

import { Breadcrumb } from '@dnb/eufemia'

Description

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

Demos

Breadcrumb

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 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 />)
  • 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.
  • Breadcrumb will collapse on small screens

Pages as child components

For customizing the Breadcrumb to fit your needs, you can add each page as a child component.

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>

Single Breadcrumb

When you only want a single button for back.

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

This can also be forced using the variant="single" property.

Always be collapsed (variant="collapse")

Expands when user clicks

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

Never collapse (variant="multiple")

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