Pistachio the front end framework and pattern library for graze.com
contents:
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.
<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>
<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>