Breadcrumb

A <nav> holding an ordered list of crumbs. The server knows the trail at render time, so there is nothing for an element to do: mark the last crumb with .hui-breadcrumb__page and aria-current="page", and give the <nav> an aria-label.

A trail

The list wraps rather than scrolls, so a long trail folds onto a second line on a phone instead of pushing the page sideways. The separator is user-select: none, so copying the trail does not drag the slashes along with it; an icon works there as well as a character.

.hui-breadcrumb

A breadcrumb trail.

<nav class="hui-breadcrumb" aria-label="Breadcrumb">
  <ol class="hui-breadcrumb__list">
    <li><a class="hui-breadcrumb__link" href="/">Home</a></li>
    <li><span class="hui-breadcrumb__separator">/</span></li>
    <li><span class="hui-breadcrumb__page" aria-current="page">Now</span></li>
  </ol>
</nav>

.hui-breadcrumb__link

A breadcrumb link.

.hui-breadcrumb__list

The breadcrumb list; lays items in a row.

.hui-breadcrumb__page

The current page, in full foreground.

.hui-breadcrumb__separator

The divider between crumbs.