Component List

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.

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.

Name	Type	Default Value	Description
`$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.

breadcrumbs-container

@include breadcrumbs-container;

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