Breadcrumb#

Import#

import { Breadcrumb } from '@dnb/eufemia'

Description#

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

Accessibility#

When openOnFind is enabled, find-in-page support is powered by HeightAnimation; see its accessibility notes for behavior details and browser support.

Relevant links#

• Figma
• Source code
• Docs code

Related components#

Breadcrumb is part of the Navigation category. Other components for similar needs:

• InfinityScroller — to load more content automatically as people scroll.
• Pagination — to split long content into pages or load more content as people move through it.
• SkipContent — to help keyboard users jump past large or repeated content.
• StepIndicator — to show progress through a process with several steps.
• Tabs — to let people switch between related views on the same page.

Demos#

Breadcrumb with pages as data#

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.

// 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.

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

<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

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")#

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 />)