Foundation
Jump to Nav

# Breadcrumbs

Breadcrumbs come in handy to show a navigation trail for users clicking through your site.

To make a set of breadcrumb links, just add the class `.breadcrumbs` to a `<ul>`, and then add links inside of the `<li>` elements.

The current page doesn't require a link or a class, but you should add some explanatory text for AT that indicates which item is the current page.

To mark a disabled item, add the class `.disabled` to the `<li>`, and just use plain text instead of a link.

We use a CSS `::after` element containing a slash character to create the separator between items. Some screen readers will read this character out loud—if this is an issue, you can use a background image or a separate element with `aria-hidden="true"` to create the separator instead.

    <nav aria-label="You are here:" role="navigation">
      <ul class="breadcrumbs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li class="disabled">Gene Splicing</li>
        <li>
          <span class="show-for-sr">Current: </span> Cloning
        </li>
      </ul>
    </nav>

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$breadcrumbs-margin` | Number | `0 0 $global-margin 0` | Margin around a breadcrumbs container.
`$breadcrumbs-item-font-size` | Number | `rem-calc(11)` | Font size of breadcrumb links.
`$breadcrumbs-item-color` | Color | `$primary-color` | Color of breadcrumb links.
`$breadcrumbs-item-color-current` | Color | `$black` | Color of the active breadcrumb link.
`$breadcrumbs-item-color-disabled` | Number | `$medium-gray` | Opacity of disabled breadcrumb links.
`$breadcrumbs-item-margin` | Number | `0.75rem` | Margin between breadcrumb items.
`$breadcrumbs-item-uppercase` | Boolean | `true` | If `true`, makes breadcrumb links uppercase.
`$breadcrumbs-item-slash` | Boolean | `true` | If `true`, adds a slash between breadcrumb links.
`$breadcrumbs-item-slash-color` | Color | `$medium-gray` | Color of breadcrumb slash.

### Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

#### breadcrumbs-container

    @include breadcrumbs-container;

Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.