Show a path
<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>
<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>
<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>
<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>
<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>
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 | - | - |
Made at Fomo