---
title: "Breadcrumb"
description: "Displays the path to the current resource using a hierarchy of links."
url: "https://susonwaiba.github.io/htmx-ui/docs/v0.2/components/breadcrumb"
section: "Components"
---
# Breadcrumb
Displays the path to the current resource using a hierarchy of links.
```html
Home Docs Components Breadcrumb
```
## Markup
- A `` around an ``.
- Each step is an `` holding an ``.
- The last one is the current page: ``, not a link.
- Between steps, an ``. Screen readers skip it; the list already says how many steps there are.
A long breadcrumb wraps onto more lines. To keep it on one, let it [collapse](#collapsing).
## Custom separator
The separator is whatever you put in it: any icon, or text.
```html
Home Components Breadcrumb
Home ·
Components ·
Breadcrumb
```
## Dropdown
A step can be a [dropdown](https://susonwaiba.github.io/htmx-ui/docs/v0.2/components/dropdown) instead of a link, for jumping to a sibling page. Make the trigger a ``; it stays highlighted while the menu is open.
```html
Home
Breadcrumb
```
## Collapsed
`.breadcrumb-ellipsis` stands in for steps left out of a long path. Make it the trigger of a dropdown that lists them, and give it an `aria-label`.
```html
Home
Inputs Input group
```
## Collapsing when it doesn't fit
With `data-breadcrumb` on the ``, the breadcrumb stays on one line and collapses by itself. Add a hidden ellipsis item, and a hidden separator, after the first step. Whenever the breadcrumb changes width, steps in the middle are hidden from the left until it fits, the ellipsis appears, and its menu lists the hidden steps as links. The first step and the current page always stay; the page name truncates as a last resort. Drag the corner of the box to resize it:
```html
```
It works the same in a fragment returned by htmx. To collapse a fixed number of steps instead, whatever the width, write the ellipsis yourself as in [Collapsed](#collapsed), and leave out `data-breadcrumb`.
## Reference
| Class | Description |
| --- | --- |
| `.breadcrumb` | The : a wrapping row of steps. |
| `.breadcrumb-item` | One step (). |
| `.breadcrumb-link` | A link, or a button opening a dropdown; highlighted while expanded. |
| `.breadcrumb-page` | The current page, with aria-current="page". |
| `.breadcrumb-separator` | Between steps, aria-hidden. Any icon or text. |
| `.breadcrumb-ellipsis` | "…" button standing in for hidden steps. |
| `[data-breadcrumb]` | On the : one line, collapsing middle steps into [data-breadcrumb-ellipsis] when it doesn't fit. |
| `[data-breadcrumb-ellipsis]` | The hidden ellipsis item; its [role=menu] is filled with the hidden steps. |