Breadcrumbs
HTMLShow a path
Basic
HTML
<nav class="o-breadcrumbs">
<ul>
<li>
<a class="is-active">
<span class="o-icon-integrations"></span>
First
</a>
</li>
<li>
<a>
Second
</a>
</li>
<li>
<a>
Third
</a>
</li>
<li>
<a>
Fourth
</a>
</li>
</ul>
</nav>
With a back button
HTML
<nav class="o-breadcrumbs">
<a href="/" class="o-breadcrumbs__button is-active">
Back
</a>
<ul>
<li>
<a class="is-active">
<span class="o-icon-integrations"></span>
First
</a>
</li>
<li>
<a>
Second
</a>
</li>
<li>
<a>
Third
</a>
</li>
<li>
<a>
Fourth
</a>
</li>
</ul>
</nav>
Full width
HTML
<nav class="o-breadcrumbs o-breadcrumbs--full">
<ul>
<li>
<a class="is-active">
<span class="o-icon-integrations"></span>
First
</a>
</li>
<li>
<a>
Second
</a>
</li>
<li>
<a>
Third
</a>
</li>
<li>
<a>
Fourth
</a>
</li>
</ul>
</nav>
Steps
HTML
<nav class="o-breadcrumbs o-breadcrumbs--full">
<ul>
<li>
<a class="is-active">
<span class="o-icon-integrations"></span>
First
</a>
</li>
<li>
<a class="is-active">
Second
</a>
</li>
<li>
<a>
Third
</a>
</li>
<li>
<a>
Fourth
</a>
</li>
</ul>
</nav>
Colors
HTML
<nav class="o-breadcrumbs o-breadcrumbs--color-{color}">
<ul>
<li>
<a class="is-active">
<span class="o-icon-integrations"></span>
First
</a>
</li>
<li>
<a class="is-active">
Second
</a>
</li>
<li>
<a>
Third
</a>
</li>
<li>
<a>
Fourth
</a>
</li>
</ul>
</nav>
Usage
| Attribute | Description | Possible values | Type | Required | Default |
|---|---|---|---|---|---|
| size | Set with .o-breadcrumbs--{size} | full. | String | - | - |
| color | Set with .o-breadcrumbs--color-{color} class | See Colors page | String | - | - |