---
title: Breadcrumbs
layout: component.html
---
***
{{> 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}}
***
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:
HTML
{{#markdown}}
```html
{{> examples_breadcrumbs_accessible}}
```
{{/markdown}}
Rendered HTML
{{> examples_breadcrumbs_accessible_rendered}}
**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
{{> 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";
```