Pistachio the front end framework and pattern library for graze.com

contents:


    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>