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.



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.

HTML

<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.

HTML

<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:

SCSS

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

HTML

<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";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »