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>