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>

Customize With Sass

Breadcrumbs can be easily customized using our Sass variables.

SCSS

$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-font-size: rem-calc(11);
$crumb-font-color: $primary-color;
$crumb-font-color-current: #333;
$crumb-font-color-unavailable: #999;
$crumb-font-transform: uppercase;
$crumb-link-decor: underline;

// We use these to control the slash between breadcrumbs
$crumb-slash-color: #aaa;
$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";