Breadcrumbs

Easily create nice looking breadcrumbs in different styles

Usage

The breadcrumb component consists of a .c-breadcrumbs parent component which is in a nav tag. This wraps a .c-breadcrumbs__list list tag with children that have the .c-breadcrumbs__item class.

Variables in component.breadcrumbs.definition.scss give you control over a great deal of parameters include spacer icon, spacing and text decoration.

This component is based on the Foundation breadcrumb component using microdata recommendations from Google for breadcrumbs to improve SEO. It also includes ARIA labels to let visually impared users know where they are and what the current breadcrumb item is.

Microformats meta can be validated using this Google tool.

<nav class="c-breadcrumbs" aria-label="You are here:">
  <ol class="c-breadcrumbs__list" itemscope itemtype="http://schema.org/BreadcrumbList" itemListOrder="Hierarchical">
    <li class="c-breadcrumbs__item" itemscope itemtype="http://schema.org/ListItem" itemprop="ItemListElement">
      <a href="#" itemscope itemtype="http://schema.org/Thing" itemprop="item">
        <span itemprop="name">Home</span>
      </a>
    </li>
    <li class="c-breadcrumbs__item" itemscope itemtype="http://schema.org/ListItem" itemprop="ItemListElement">
      <a href="#" itemscope itemtype="http://schema.org/Thing" itemprop="item">
        <span itemprop="name">Features</span>
      </a>
    </li>
    <li class="c-breadcrumbs__item disabled" itemscope itemtype="http://schema.org/ListItem" itemprop="ItemListElement">
      <span itemprop="name">Gene Splicing</span>
    </li>
    <li class="c-breadcrumbs__item--current" itemscope itemtype="http://schema.org/ListItem" itemprop="ItemListElement">
      <span itemprop="name" aria-label="Current:">Cloning</span>
    </li>
  </ol>
</nav>