You can create a breadcrumb element with the breadcrumb
class and a single child ul
tag. The dividers are created automatically in the content CSS property of the ::before
pseudo-element of the li
tag.
<nav class="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">Breadcrumb</a></li>
</ul>
</nav>
The is-active
modifier can be used to signify the currently active page.
<nav class="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Navigation</a></li>
<li class="is-active">Breadcrumb</li>
</ul>
</nav>
The is-disabled
modifier can be used to grey out an item in the breadcrumb.
<nav class="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Navigation</a></li>
<li class="is-disabled">Breadcrumb</li>
</ul>
</nav>
These modifiers are not specific to the Breadcrumb module and can be found within the OrbitCSS global modifiers.
The has-centered
modifier will position all of the items to the center of the breadcrumb list.
<nav class="breadcrumb">
<ul class="has-centered">
<li><a href="#">Home</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">Breadcrumb</a></li>
</ul>
</nav>
The has-end
modifier will align the items from right to left.
<nav class="breadcrumb">
<ul class="has-end">
<li><a href="#">Home</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">Breadcrumb</a></li>
</ul>
</nav>
The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
Variable | Type | Default Value |
---|---|---|
$breadcrumb-color | color | $link |
$breadcrumb-disabled-color | color | $muted |
$breadcrumb-active-color | color | $black |
$breadcrumb-hover-color | color | $black |
$breadcrumb-separator-color | color | $black |
$breadcrumb-separator-padding | padding | 0 0.625rem |
$breadcrumb-separator | string | / |