---
title: Breadcrumbs
layout: doc/layouts/default.html
---
# Breadcrumbs
***
{{> examples_breadcrumbs_basic}}
***
## 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
{{> examples_breadcrumbs_basic_rendered}}
Rendered HTML
{{> examples_breadcrumbs_basic}}
You can also add a `.breadcrumbs` class to a `nav` element containing anchor links to get the same result.
HTML
{{> examples_breadcrumbs_basic_nav_rendered}}
Rendered HTML
{{> examples_breadcrumbs_basic_nav}}
***
## Customize With Sass
Breadcrumbs can be easily customized using our Sass variables.
SCSS
{{> examples_breadcrumbs_variables}}
***
## 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
{{#markdown}}
```scss
.your-class-name {
@include crumb-container;
li {
@include crumbs;
}
}
```
{{/markdown}}
HTML
{{> examples_breadcrumbs_mixin}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/breadcrumbs";
```