Breadcrumbs

Breadcrumbs come in handy to show a navigation trail for users clicking through your site.

To make a set of breadcrumb links, just add the class .breadcrumbs to a <ul>, and then add links inside of the <li> elements. The current page doesn't require a link or a class, but you should add some explanatory text for AT that indicates which item is the current page.

To mark a disabled item, add the class .disabled to the <li>, and just use plain text instead of a link.

Watch this part in video

We use a CSS ::after element containing a slash character to create the separator between items. Some screen readers will read this character out loud—if this is an issue, you can use a background image or a separate element with aria-hidden="true" to create the separator instead.

edit on codepen button

If your site is visited by search engines, then you should consider adding Schema.org structure data. This will allow your site to appear more attractive in search results.

For more information, see Breadcrumbs - Google Developers, BreadcrumbList - schema.org.

<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li class="disabled">Gene Splicing</li>
    <li>
      <span class="show-for-sr">Current: </span> Cloning
    </li>
  </ul>
</nav>

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$breadcrumbs-margin Number 0 0 $global-margin 0

Margin around a breadcrumbs container.

$breadcrumbs-item-font-size Number rem-calc(11)

Font size of breadcrumb links.

$breadcrumbs-item-color Color $primary-color

Color of breadcrumb links.

$breadcrumbs-item-color-current Color $black

Color of the active breadcrumb link.

$breadcrumbs-item-color-disabled Number $medium-gray

Opacity of disabled breadcrumb links.

$breadcrumbs-item-margin Number 0.75rem

Margin between breadcrumb items.

$breadcrumbs-item-uppercase Boolean true

If true, makes breadcrumb links uppercase.

$breadcrumbs-item-separator Boolean true

If true, adds a seperator between breadcrumb links.

$breadcrumbs-item-separator-item Content '/'

Used character for the breadcrumb separator.

$breadcrumbs-item-separator-item-rtl Content '\\'

Used character for the breadcrumb separator in rtl mode.

$breadcrumbs-item-separator-color Color $medium-gray

Color of breadcrumb item.


Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

@include breadcrumbs-container;

Adds styles for a breadcrumbs container, along with the styles for the <li> and <a> elements inside of it.