Navigation

Breadcrumb

Location trail with a drawn slash separator; the current page is text, not a link.

.crumbs · nav + ordered list

<nav class="crumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="overview.html">Merchants</a></li>
    <li><a href="overview.html">Hillcrest Grocers</a></li>
    <li aria-current="page">Terminals</li>
  </ol>
</nav>

Usage

• An ordered list in a labelled nav; the current page is plain text with aria-current="page", never a link.
• The slash separator is drawn by the console layer between items, muted, so assistive technology reads only the trail.
• Items never wrap mid-label; long trails wrap between items. Three levels is the comfortable maximum.
• On console screens the breadcrumb sits above the title in the page header; it states location and never replaces the navigation.