50Breadcrumb

Where you are, as mono kicker links. The separator is a pseudo-element so it is never read aloud; the last crumb is text with aria-current, not a link to where you already are.

Use it for

Course > section > lesson depth

Not for

Single-level sites

Default

markup

<nav aria-label="Breadcrumb">
  <ol class="ns-breadcrumb">
    <li class="ns-breadcrumb__item"><a class="ns-breadcrumb__link" href="#">Courses</a></li>
    <li class="ns-breadcrumb__item"><a class="ns-breadcrumb__link" href="#">Apex</a></li>
    <li class="ns-breadcrumb__item"><span class="ns-breadcrumb__link" aria-current="page">Triggers</span></li>
  </ol>
</nav>

Accessibility contract

Wrapped in