Breadcrumb | OrbitCSS Documentation

Improve user navigation experience with breadcrumbs

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>

Copy

Controls

Active

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>

Copy

Disabled

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>

Copy

Alignment

These modifiers are not specific to the Breadcrumb module and can be found within the OrbitCSS global modifiers.

Center alignment

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>

Copy

Right alignment

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>

Copy

Variables

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	/