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.

Relevant links

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