Introduction

Breadcrumbs are a navigational landmark that let the user discover their current position in the site hierarchy and provide a means to navigate upwards through that hierarchy.

The term 'breadcrumbs' comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

Working Examples

You can take a look at the breadcrumbs pattern in action on our examples site.

You can get an idea of the required markup structure by viewing our bones project.

Best Practices

Breadcrumbs are typically used as secondary navigation on sites that are organized in a hierarchical manner.

The breadcrumb pattern has two conventions that set it apart from a typical list of ordered links.

1. The 'greater than' symbol > is used to separate each link

2. The last breadcrumb should not be a link

Breadcrumbs must have a heading of 'You are here', or words to those effect. This heading can be hidden offscreen.

Interaction Design

Breadcrumb interaction is similar to a simple list of ordered links.

Keyboard

TAB key moves from breadcrumb to breadcrumb. The last breadcrumb is not a link and therefore must not be in the tab order.

Screen Reader

The screen reader will recognize the breadcrumbs as a navigation landmark.

Each breadcrumb will be announced as 'link', followed by the link text.

The screen reader will announce each separator symbol as 'greater than'. This is the standard eBay convention for separating breadcrumbs.

Developer Guide

Breadcrumbs require no JavaScript, they are simply an ordered list of links inside of a navigation landmark region:

<nav aria-labelledby="breadcrumbs_heading" class="breadcrumbs" role="navigation">
    <h2 id="breadcrumbs_heading">You are here</h2>
    <ol>
        <li><a href="http://www.ebay.com">Home</a></li>
        <li><a href="http://www.ebay.com">Clothing, Shoes &amp; Accessories</a></li>
        <li><a href="http://www.ebay.com">Men's Shoes</a></li>
        <li><span>Boots</span></li>
    </ol>
</nav>

The heading ('You are here') can be hidden offscreen using the .clipped class.

The seperator content can be generated with CSS:

.breadcrumbs li::after {
    content: '>';
}
.breadcrumbs li:last-child::after {
    content: '';
}

This generated content is inserted between the closing </a> and </li> tags.