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 aul element. List items will automatically be styled, and you can add.current or.unavailable classes to list items to denote their state.

<ulclass="breadcrumbs"><li><ahref="#">Home</a></li><li><ahref="#">Features</a></li><liclass="unavailable"><ahref="#">Gene Splicing</a></li><liclass="current"><ahref="#">Cloning</a></li></ul>

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

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

Accessibility

Use this snippet to make breadcrumbs more accessible. Adding the role attribute gives context to a screen reader. Thearia-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 anunavailable link, give it an aria-disabled attribute as in this example:

<navclass="breadcrumbs"role="menubar"aria-label="breadcrumbs"><lirole="menuitem"><ahref="#">Home</a></li><lirole="menuitem"><ahref="#">Features</a></li><lirole="menuitem"class="unavailable"role="button"aria-disabled="true"><ahref="#">Gene Splicing</a></li><lirole="menuitem"class="current"><ahref="#">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(9149);$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 thecrumb-container() mixin to style your own breadcrumbs container with semantic markup and include thecrumbs() mixin for each breadcrumb, like so:

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

<ulclass="your-class-name"><li><ahref="#">Home</a></li><li><ahref="#">Features</a></li><liclass="unavailable"><ahref="#">Gene Splicing</a></li><liclass="current"><ahref="#">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";