Breadcrumbs

Put an <ol> inside a <nav> to make a breadcrumb trail. The crumbs need no breadcrumb class. Mark the last item, the current page, with aria-current="page".

<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>

Set --md-comp-breadcrumb-separator to change the separator. It defaults to /, which is not an icon-font glyph, so the trail still reads if Symbols are not loaded. Set the token to "›" for 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

<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.

<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.

<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>