Breadcrumb · Porchlight

The .pl-c-breadcrumb renders a trail of links showing the user’s location in the hierarchy. Separators are CSS-only: gap decorations where supported, ::after fallback otherwise.

Semantic HTML

<nav class="pl-c-breadcrumb" aria-label="Breadcrumb">
  <ol class="pl-c-breadcrumb__list">
    <li class="pl-c-breadcrumb__item">
      <a class="pl-c-breadcrumb__link" href="/">Home</a>
    </li>
    <li class="pl-c-breadcrumb__item">
      <span class="pl-c-breadcrumb__current" aria-current="page">Current</span>
    </li>
  </ol>
</nav>

Class contract

Selector	Role
`.pl-c-breadcrumb`	Nav wrapper.
`.pl-c-breadcrumb__list`	Ordered list (flex).
`.pl-c-breadcrumb__item`	List item (separator via ::after).
`.pl-c-breadcrumb__link`	Navigation link.
`.pl-c-breadcrumb__current`	Current page (aria-current=“page”).