Breadcrumbs

A <nav> with an ordered list of links showing the current page's position in a hierarchy. The separators are drawn with ::after, no extra markup needed.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/breadcrumbs.css" />

Default

Mark the current page with aria-current="page" instead of a link.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/electronics">Electronics</a></li>
    <li aria-current="page">Laptop</li>
  </ol>
</nav>

Custom properties

Set these on the nav to override its built-in styling.

Property	Default	Description
`--icon`	A chevron pointing right	The separator between items. It is used as a mask, so only the shape of the image counts. The color comes from the component.

nav[aria-label="Breadcrumb"] {
  --icon: url("/icons/slash.svg");
}

API reference

Type	Classes / attributes	What it does
Current	`[aria-current="page"]`	Marks the current page with stronger text
Separator	`--icon: url("/icons/slash.svg")`	Replaces the separator icon, used as a mask