Breadcrumbs

Breadcrumbs come in handy to show a navigation trail for users clicking through a site or app. They'll fill out 100% of the width of their parent container.

• Home
• Features
• Gene Splicing
• Cloning

Basic

Add a class of .breadcrumbs to a ul element. List items will automatically be styled, and you can add .current or .unavailable classes to list items to denote their state.

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Features</a></li>
  <li class="unavailable"><a href="#">Gene Splicing</a></li>
  <li class="current"><a href="#">Cloning</a></li>
</ul>

You can also add a .breadcrumbs class to a nav element containing anchor links to get the same result.

<nav class="breadcrumbs">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a class="unavailable" href="#">Gene Splicing</a>
  <a class="current" href="#">Cloning</a>
</nav>

Accessibility

Use this snippet to make breadcrumbs more accessible. Adding the role attribute gives context to a screen reader. The aria-label attribute will allow a screen reader to call out what the component is to the user. We added some Scss so the screen reader skips the /. Using the Tab button, a user can navigate until they've reached the link below. (Use Shift+Tab to navigate back one step.)

If you are using an unavailable link, give it an aria-disabled attribute as in this example:

<nav class="breadcrumbs" role="menubar" aria-label="breadcrumbs">
    <li role="menuitem"><a href="#">Home</a></li>
    <li role="menuitem"><a href="#">Features</a></li>
    <li role="menuitem" class="unavailable" role="button" aria-disabled="true"><a href="#">Gene Splicing</a></li>
    <li role="menuitem" class="current"><a href="#">Cloning</a></li>
</nav>

Note: It is bad practice to leave links that do not go anywhere on your live site. Use something like foo.html to fill them as you build.

Customize with Sass

Breadcrumbs can be easily customized using our Sass variables.

SCSS

//
// Breadcrumb Variables
//
$include-html-nav-classes: $include-html-classes;

// We use this to set the background color for the breadcrumb container.
$crumb-bg: scale-color($secondary-color, $lightness: 55%);

// We use these to set the padding around the breadcrumbs.
$crumb-padding: rem-calc(9 14 9);
$crumb-side-padding: rem-calc(12);

// We use these to control border styles.
$crumb-function-factor: -10%;
$crumb-border-size: 1px;
$crumb-border-style: solid;
$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
$crumb-radius: $global-radius;

// We use these to set various text styles for breadcrumbs.
$crumb-line-height: rem-calc(11);
$crumb-font-size: rem-calc(11);
$crumb-font-color: $primary-color;
$crumb-font-color-current: $oil;
$crumb-font-color-unavailable: $aluminum;
$crumb-font-transform: uppercase;
$crumb-link-decor: underline;

// We use these to control the slash between breadcrumbs
$crumb-slash-color: $base;
$crumb-slash: "/";

Semantic Markup With Sass

You can apply breadcrumb styles to semantic markup using Sass mixins.

Basic

Include the crumb-container() mixin to style your own breadcrumbs container with semantic markup and include the crumbs() mixin for each breadcrumb, like so:

.your-class-name {
  @include crumb-container;
  li {
    @include crumbs;
  }
}

<ul class="your-class-name">
  <li><a href="#">Home</a></li>
  <li><a href="#">Features</a></li>
  <li class="unavailable"><a href="#">Gene Splicing</a></li>
  <li class="current"><a href="#">Cloning</a></li>
</ul>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/breadcrumbs";