Components

Breadcrumb

A compact path trail rendered as an ordered list. Links are soft ink, a faint / separates the items, and the current page — marked aria-current="page" — sits in full ink.

Trail

Each step is a ds-breadcrumb__item; intermediate steps wrap a ds-breadcrumb__link. The separator is drawn with ::after and hidden on the last item.

Three levels

<nav aria-label="Breadcrumb">
  <ol class="ds-breadcrumb">
    <li class="ds-breadcrumb__item"><a class="ds-breadcrumb__link" href="#">Home</a></li>
    <li class="ds-breadcrumb__item"><a class="ds-breadcrumb__link" href="#">Pricing</a></li>
    <li class="ds-breadcrumb__item" aria-current="page">Matrix</li>
  </ol>
</nav>

Deep trail

The list wraps when it runs out of room, so deeper trails stay legible on narrow screens.

Wrapping

<nav aria-label="Breadcrumb">
  <ol class="ds-breadcrumb">
    <li class="ds-breadcrumb__item"><a class="ds-breadcrumb__link" href="#">Home</a></li>
    <li class="ds-breadcrumb__item"><a class="ds-breadcrumb__link" href="#">Catalog</a></li>
    <li class="ds-breadcrumb__item"><a class="ds-breadcrumb__link" href="#">Profiles</a></li>
    <li class="ds-breadcrumb__item"><a class="ds-breadcrumb__link" href="#">Senior</a></li>
    <li class="ds-breadcrumb__item" aria-current="page">Daily rate</li>
  </ol>
</nav>

React

Pass an ordered items array of { label, href }; the last item becomes the current page automatically.

import { Breadcrumb } from "@diametral/design-system/react";

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Pricing", href: "/pricing" },
    { label: "Matrix" },
  ]}
/>