Breadcrumb object

by inuitcss

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<ol class="nav  breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">The Board</a></li>
    <li class="current"><a href="#">Directors</a></li>
</ol>

<ol class="nav  breadcrumb--path">
    <li class="breadcrumb__root"><a href="#">inuit.css</a></li>
    <li><a href="#">inuit.css</a></li>
    <li><a href="#">partials</a></li>
    <li class="current"><a href="#">objects</a></li>
</ol>

<ol class="nav  breadcrumb">
    <li><a href="#">Home</a></li>
    <li data-breadcrumb="|"><a href="#">About</a></li>
    <li data-breadcrumb="|"><a href="#">The Board</a></li>
    <li data-breadcrumb="|" class="current"><a href="#">Directors</a></li>
</ol>

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_breadcrumb.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    padding:5%;
    background-color:#fff;
    color:#333;
}