@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
365 lines (325 loc) • 9.66 kB
Markdown
---
title: 'Breadcrumb'
description: 'Use Breadcrumb to show where someone is and let them move back up the path.'
version: 11.8.2
generatedAt: 2026-07-03T14:39:18.608Z
checksum: 69961006f2a91fb32032f9ab274215ceced4424c4dc7a062cfd6b9f591d579d1
---
```tsx
import { Breadcrumb } from '@dnb/eufemia'
```
The Breadcrumb is a component for navigation and for showing the current website path or tree.
- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=17025-0)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/breadcrumb)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb)
Breadcrumb is part of the [Navigation](/uilib/components/overview/
- [InfinityScroller](/uilib/components/pagination/infinity-scroller/) – to load more content automatically as people scroll.
- [Pagination](/uilib/components/pagination/) – to split long content into pages or load more content as people move through it.
- [SkipContent](/uilib/components/skip-content/) – to help keyboard users jump past large or repeated content.
- [StepIndicator](/uilib/components/step-indicator/) – to show progress through a process with several steps.
- [Tabs](/uilib/components/tabs/) – to let people switch between related views on the same page.
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](/uilib/components/breadcrumb/
```tsx
// 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
For customizing the Breadcrumb to fit your needs, you can add each page as a child component.
```tsx
render(
<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>
)
```
When you only want a single button for `back`.
```tsx
render(
<Breadcrumb
onClick={() => {
console.log('Going back!')
}}
/>
)
```
This can also be forced using the `variant="single"` property.
Expands when user clicks
```tsx
const pages = [
{
text: '',
href: '/',
},
{
text: 'UI Library',
href: '/uilib',
},
{
text: 'Components',
href: '/uilib/components',
},
]
render(<Breadcrumb variant="collapse" data={pages} spacing />)
```
```tsx
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 />)
```
```json
{
"props": {
"data": {
"doc": "List of pages to render as breadcrumb items. Each object in data can include all properties from [BreadcrumbItem properties](/uilib/components/breadcrumb/properties#breadcrumbitem-properties).",
"type": "Array<BreadcrumbItemProps>",
"status": "optional"
},
"children": {
"doc": "Content of the component. Can be used instead of property `data`, by adding `Breadcrumb.Item` children `<Breadcrumb.Item {...properties} />`.",
"type": "React.ReactNode",
"status": "optional"
},
"variant": {
"doc": "Defaults to `responsive` or `single` depending on content. Options: `responsive` | `single` | `multiple` | `collapse`.",
"type": [
"\"responsive\"",
"\"single\"",
"\"multiple\"",
"\"collapse\""
],
"status": "optional"
},
"href": {
"doc": "For variant `single`, set `href` for button click. Can be used instead of event/property `onClick`.",
"type": "string",
"status": "optional"
},
"navText": {
"doc": "Every `<nav>` on a page needs a unique `aria-label` text.",
"type": "React.ReactNode",
"status": "optional"
},
"goBackText": {
"doc": "Override with a custom 'Back' text for variant `single` (Not recommended).",
"type": "React.ReactNode",
"status": "optional"
},
"homeText": {
"doc": "Override with a custom 'Home' text (Not recommended).",
"type": "React.ReactNode",
"status": "optional"
},
"backToText": {
"doc": "Override with a custom 'Back to...' text (Not recommended).",
"type": "React.ReactNode",
"status": "optional"
},
"backgroundColor": {
"doc": "No longer supported after the Breadcrumb redesign.",
"type": "Various",
"status": "deprecated"
},
"collapsedStyleType": {
"doc": "No longer supported after the Breadcrumb redesign.",
"type": [
"\"error\"",
"\"information\"",
"\"warning\"",
"\"success\""
],
"status": "deprecated"
},
"className": {
"doc": "Custom `className` for the component root.",
"type": "string",
"status": "optional"
},
"collapsed": {
"doc": "For variant `collapse`, override collapsed state for the collapsed content by updating this value using the provided property `onClick`.",
"type": "boolean",
"status": "optional"
},
"spacing": {
"doc": "Include spacing properties in breadcrumb. If only `true` is given, the spacing will be `small`. Defaults to `false`.",
"type": "Various",
"status": "optional"
},
"skeleton": {
"doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
"type": "boolean",
"status": "optional"
},
"noAnimation": {
"doc": "Disables the height animation. Defaults to `false`.",
"type": "boolean",
"status": "optional"
},
"[Space](/uilib/layout/space/properties)": {
"doc": "Spacing properties like `top` or `bottom` are supported.",
"type": ["string", "object"],
"status": "optional"
}
}
}
```
```json
{
"props": {
"text": {
"doc": "Text displaying inside Breadcrumb item.",
"type": "React.ReactNode",
"status": "optional"
},
"variant": {
"doc": "The component variant. Options: `home` | `previous` | `current`.",
"type": ["\"home\"", "\"previous\"", "\"current\""],
"status": "optional"
},
"icon": {
"doc": "Override icon displaying on the left side (Not recommended). Defaults to `chevron_left`.",
"type": "React.ReactNode",
"status": "optional"
},
"href": {
"doc": "Set what happens when the user clicks on the item. Also see `onClick` event.",
"type": "string",
"status": "optional"
},
"skeleton": {
"doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
"type": "boolean",
"status": "optional"
}
}
}
```
**NB:** When interactive, the item is an inherited [Button](/uilib/components/button/). You can therefore swap out the underlying HTML element, by providing a new `element` or use other Button properties, such as `to` instead of `href`.
```json
{
"locales": ["da-DK", "en-GB", "nb-NO", "sv-SE"],
"entries": {
"Breadcrumb.backToText": {
"nb-NO": "Gå til ...",
"en-GB": "Go to ...",
"sv-SE": "Gå till ...",
"da-DK": "Gå til ..."
},
"Breadcrumb.goBackText": {
"nb-NO": "Tilbake",
"en-GB": "Back",
"sv-SE": "Tillbaka",
"da-DK": "Tilbage"
},
"Breadcrumb.homeText": {
"nb-NO": "Hjem",
"en-GB": "Home",
"sv-SE": "Hem",
"da-DK": "Hjem"
},
"Breadcrumb.navText": {
"nb-NO": "Sidehierarki",
"en-GB": "Page hierarchy",
"sv-SE": "Sidstruktur",
"da-DK": "Sidehierarki"
}
}
}
```
```json
{
"props": {
"onClick": {
"doc": "Will be called by user click interaction, to handle click event on \"Back\" for variant `single` and \"Back to...\" for variant `collapse`.",
"type": "function",
"status": "optional"
},
"onToggle": {
"doc": "Will be called when breadcrumb expands or collapses.",
"type": "function",
"status": "optional"
}
}
}
```
```json
{
"props": {
"onClick": {
"doc": "Will be called by user click interaction.",
"type": "function",
"status": "optional"
}
}
}
```