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>