Breadcrumb

Breadcrumb shows the path from the top of the site to the current page. It is a named nav with an ordered list, CSS separators, truncation, and no JavaScript.

Public web API

One root hook on a <nav> around an <ol>. The last item is the current page.

<nav data-bitsy-breadcrumb aria-label="Breadcrumb">
  <ol>
    <li><a href="/settings">Settings</a></li>
    <li><a href="/settings/billing">Billing</a></li>
    <li><a aria-current="page">Invoice #1042</a></li>
  </ol>
</nav>

Mark the current item with aria-current="page" and leave off its href.
Never type separators into the HTML. CSS draws them and screen readers skip them.
Always set aria-label="Breadcrumb" on the <nav>.

Variants and truncation

Slash, chevron, a custom separator, a home icon, a long label, and a five-level trail that wraps.

In context

A trail above a page title.

Invoices

Download past invoices and update your billing contact.

Foundation versus Bit

The foundation styles links and lists, but not an inline trail with separators, truncation, and a current item. data-bitsy-breadcrumb adds those, ships no JavaScript, and defines only --bitsy-breadcrumb-* hooks.