---
title: 'Breadcrumb'
description: 'The Breadcrumb component is a bar for navigation showing current web path.'
version: 11.3.0
generatedAt: 2026-05-19T08:44:41.479Z
checksum: d64f91f44b0713a618053013c3d2b68a096909bdf9d4f815b94eb02f72bd00b3
---
# Breadcrumb
## Import
```tsx
import { Breadcrumb } from '@dnb/eufemia'
```
## Description
The Breadcrumb is a component for navigation and for showing the current website path or tree.
## Relevant links
- [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)
## 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](/uilib/components/breadcrumb/#pages-as-child-components).
```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();
```
- 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.
```tsx
render( {
console.log('go home!');
}} variant="home" />
{
console.log('go to page 1');
}} />
{
console.log('go to page 2');
}} variant="current" />
)
```
### Single Breadcrumb
When you only want a single button for `back`.
```tsx
render( {
console.log('Going back!');
}} />)
```
This can also be forced using the `variant="single"` property.
### Always be collapsed (`variant="collapse"`)
Expands when user clicks
```tsx
const pages = [{
text: '',
href: '/'
}, {
text: 'UI Library',
href: '/uilib'
}, {
text: 'Components',
href: '/uilib/components'
}];
render();
```
### Never collapse (`variant="multiple"`)
```tsx
const pages = [{
text: '',
href: '/'
}, {
text: 'UI Library',
href: '/uilib'
}, {
text: 'Components',
href: '/uilib/components'
}, {
text: 'Breadcrumbs',
href: '/uilib/components/breadcrumbs'
}];
render();
```
## Properties
### `Breadcrumb` properties
```json
{
"props": {
"data": {
"doc": "List of pages to render as breadcrumbitems. Each object in data can include all properties from [BreadcrumbItem properties](/uilib/components/breadcrumb/properties#breadcrumbitem-properties).",
"type": "Array",
"status": "optional"
},
"children": {
"doc": "Content of the component. Can be used instead of property `data`, by adding Breadcrumbitem children ``.",
"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 `