zurb-foundation-5/doc/pages/components/breadcrumbs.html

Foundation 5 for npm (no code modification from original repo)

---
title: Breadcrumbs
---

<h3 class="subheader">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.</h3>

***

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

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
    {{> examples_breadcrumbs_basic_rendered}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    {{> examples_breadcrumbs_basic}}
  </div>
</div>

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

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
    {{> examples_breadcrumbs_basic_nav_rendered}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    {{> examples_breadcrumbs_basic_nav}}
  </div>
</div>

***

<h3>Accessibility</h3>

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:

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
{{#markdown}}
```html
{{> examples_breadcrumbs_accessible}}
```
{{/markdown}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>

{{> examples_breadcrumbs_accessible_rendered}}

  </div>
</div>

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

<h4>SCSS</h4>

{{> examples_breadcrumbs_variables}}

***

## Semantic Markup With Sass

You can apply breadcrumb styles to semantic markup using Sass mixins.

<h3>Basic</h3>

Include the `crumb-container()` mixin to style your own breadcrumbs container with semantic markup and include the `crumbs()` mixin for each breadcrumb, like so:

<div class="row">
  <div class="large-6 columns">
    <h4>SCSS</h4>
{{#markdown}}
```scss
.your-class-name {
  @include crumb-container;
  li {
    @include crumbs;
  }
}
```
{{/markdown}}
  </div>
  <div class="large-6 columns">
    <h4>HTML</h4>
    {{> examples_breadcrumbs_mixin}}
  </div>
</div>

***

### Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

<h4>SCSS</h4>

```scss
@import "foundation/components/breadcrumbs";
```