--- title: Breadcrumbs layout: component.html ---

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.

*** {{> 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"; ```