Cirrus

#Basics

The component only comes with a few classes. The main breadcrumb class is used to style the entire component and each navigation item is wrapped using the breadcrumb__item class.

To set a breadcrumb item's active state, just add the breadcrumb__item--active to the breadcrumb__item.

With a few lines of HTML, we can get the default breadcrumb which looks like this:

<ul class="breadcrumb">
    <li class="breadcrumb__item">
        <a href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">Settings</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--active">
        <a href="#">Search: "account"</a>
    </li>
</ul>

#Positioning

By default, breadcrumbs are left-justified. You can also use breadcrumb--center and breadcrumb--right to align the component to the center and right respectively.

Center
<ul class="breadcrumb breadcrumb--center">
    <li class="breadcrumb__item">
        <a href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">Settings</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--active">
        <a href="#">Change Avatar</a>
    </li>
</ul>
Right
<ul class="breadcrumb breadcrumb--right">
    <li class="breadcrumb__item">
        <a href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">Settings</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--active">
        <a href="#">Change Avatar</a>
    </li>
</ul>

#Separators

You can choose 4 alternative separators for your breadcrumb.

Arrow
<ul class="breadcrumb breadcrumb--arrow">
    <li class="breadcrumb__item">
        <a href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">Settings</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--active">
        <a href="#">Change Avatar</a>
    </li>
</ul>
Bullet
<ul class="breadcrumb breadcrumb--bullet">
    <li class="breadcrumb__item">
        <a href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">Settings</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--active">
        <a href="#">Change Avatar</a>
    </li>
</ul>
Dot
<ul class="breadcrumb breadcrumb--dot">
    <li class="breadcrumb__item">
        <a href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">Settings</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--active">
        <a href="#">Change Avatar</a>
    </li>
</ul>
Greater Than
<ul class="breadcrumb breadcrumb--gt">
    <li class="breadcrumb__item">
        <a href="#">Home</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">Settings</a>
    </li>
    <li class="breadcrumb__item breadcrumb__item--active">
        <a href="#">Change Avatar</a>
    </li>
</ul>