Get boba!
boba Version 1.7.2

Breadcrumbs

Breadcrumbs help you keep track of where you are.
<nav class="breadcrumb">
    <ul>
        <li><a href="#">Boba</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="active"><a href="#">Breadcrumbs</a></li>
    </ul>
</nav>

Sizes

Breadcrumbs can be resized.
<nav class="breadcrumb medium">
    <ul>
        <li><a href="#">Boba</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="active"><a href="#">Breadcrumbs</a></li>
    </ul>
</nav>

Styles

Customize your separators using the .{STYLE}-separators classes.

Pointer

<nav class="breadcrumb pointer-separators">
    <ul>
        <li><a href="#">Boba</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="active"><a href="#">Breadcrumbs</a></li>
    </ul>
</nav>

Arrow

<nav class="breadcrumb arrow-separators">
    <ul>
        <li><a href="#">Boba</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="active"><a href="#">Breadcrumbs</a></li>
    </ul>
</nav>

Triangle

<nav class="breadcrumb triangle-separators">
    <ul>
        <li><a href="#">Boba</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="active"><a href="#">Breadcrumbs</a></li>
    </ul>
</nav>

Dash

<nav class="breadcrumb dash-separators">
    <ul>
        <li><a href="#">Boba</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="active"><a href="#">Breadcrumbs</a></li>
    </ul>
</nav>

Bullet

<nav class="breadcrumb bullet-separators">
    <ul>
        <li><a href="#">Boba</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="active"><a href="#">Breadcrumbs</a></li>
    </ul>
</nav>

Alignment

Align your breadcrumbs using the .left, .center, and .right classes.
<!-- Left Align -->
<nav class="breadcrumb left">
    <ul>
        <li><a href="#">Boba</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="active"><a href="#">Left Align</a></li>
    </ul>
</nav>

<!-- Center Align -->
<nav class="breadcrumb center">
    ...
</nav>

<!-- Right Align -->
<nav class="breadcrumb right">
    ...
</nav>

Combinations

Combine multiple classes to fully customize your breadcrumbs.
<nav class="breadcrumb pointer-separators medium center">
    <ul>
        <li><a href="#">Boba</a></li>
        <li><a href="#">Pointers</a></li>
        <li><a href="#">Medium</a></li>
        <li class="active"><a href="#">Center Align</a></li>
    </ul>
</nav>