# Breadcrumbs

> The path to this page, from the HTML.

## Anatomy

A `<nav>` whose child is an `<ol>` is a breadcrumb trail. There is no `breadcrumb` class on each crumb. The last item is the current page — `aria-current="page"`.

1.  Home
2.  Library
3.  Data

```
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/library">Library</a></li>
    <li><a href="/library/data" aria-current="page">Data</a></li>
  </ol>
</nav>
```

The separator is `--md-comp-breadcrumb-separator`, default `/`. It is not an icon-font glyph, so the trail still reads if Symbols are not loaded. Set the token to `"›"` if you want a chevron.

`.breadcrumb-wrapper` and `.breadcrumb` remain as aliases for the older loose-link markup.

## Tokens

Override these on the `<nav>`.

| Token | Default |
| --- | --- |
| `--md-comp-breadcrumb-label-color` | `--md-sys-color-on-surface-variant` |
| `--md-comp-breadcrumb-current-color` | `--md-sys-color-on-surface` |
| `--md-comp-breadcrumb-separator` | `"/"` |
| `--md-comp-breadcrumb-gap` | 8px |

1.  Home
2.  Library
3.  Data

```
<nav aria-label="Breadcrumb" style="--md-comp-breadcrumb-separator: '›'">
  …
</nav>
```

## Overflow

The trail wraps by default. Add `nowrap` to keep one row and scroll sideways; the current page does not shrink.

1.  Home
2.  Library
3.  Collections
4.  Winter
5.  Catalog

```
<nav class="nowrap" aria-label="Breadcrumb">
  <ol>…</ol>
</nav>
```

## In an app bar

Put the same `<ol>` in a `header > nav`. The trail follows the bar’s color.

1.  First
2.  Second
3.  Third

```
<header>
  <nav aria-label="Breadcrumb">
    <ol>
      <li><a href="/">First</a></li>
      <li><a href="/second">Second</a></li>
      <li><a href="/second/third" aria-current="page">Third</a></li>
    </ol>
  </nav>
</header>
```