breadcrumbs

Breadcrumbs are intended to give context to where the current page is positioned in a hierachy. It gives the user the ability to easily navigate to any previous steps in that hierachy.

Basic breadcrumb

<nav class="breadcrumb">
    <p id="breadcrumb-label" class="sr-only">You are here:</p>
    <ol class="breadcrumb__list" aria-labelledby="breadcrumb-label">
        <li>
            <a class="breadcrumb__list__item" href="javascript:void(0);">Home</a>
        </li>
        <li>
            <a class="breadcrumb__list__item" href="javascript:void(0);">Snacks</a>
        </li>
        <li>
            <a class="breadcrumb__list__item" href="javascript:void(0);">Flapjacks</a>
        </li>
    </ol>
</nav>

Breadcrumb with incorporated page title

<nav class="breadcrumb breadcrumb--with-title">
    <p id="breadcrumb-label" class="sr-only">You are here:</p>
    <ol class="breadcrumb__list" aria-labelledby="breadcrumb-label">
        <li>
            <a class="breadcrumb__list__item" href="javascript:void(0);">Home</a>
        </li>
        <li>
            <a class="breadcrumb__list__item" href="javascript:void(0);">Snacks</a>
        </li>
        <li>
            <a class="breadcrumb__list__item" href="javascript:void(0);">Flapjacks</a>
        </li>
    </ol>
    <h1 class="breadcrumb__title">Honeycomb Flapjack</h1>
</nav>