---
title: 'Breadcrumb'
description: 'The Breadcrumb component is a bar for navigation showing current web path.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:09.680Z
checksum: 2d81d07f6c96525a1e6f3d0128462d27621080b2c5411a2e8ef86321138b9f36
---
# 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
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 `