Breadcrumbs

Screenshot depicting breadcrumb hierarchy on eCommerce site.
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.
Updated: Oct 14th, 2020 (replaced CSS generated content with inline SVGs)
Working Examples
Experience the breadcrumbs pattern in action on our companion eBay MIND patterns examples website.
Examine the required markup structure in our Bones GitHub project.
View a fully styled example on our eBay Skin website.
Terminology
breadcrumbs the pattern as a whole, comprised of the following sub-parts
breadcrumb item: a link
separator: the graphical symbol that separates each breadcrumb
Best Practices
Breadcrumbs are typically used as secondary navigation on sites that are organized in a hierarchical manner.
An SVG symbol is used to separate each breadcrumb link.
The last breadcrumb link, representing the current place in the hierarchy, is non-interactive.
Breadcrumbs must have a heading of 'You are here', or words to those effect. This heading can be visually hidden offscreen.
Interaction Design
Breadcrumb interaction is similar to a simple list of ordered links.
Keyboard
TAB key moves from breadcrumb to breadcrumb.
Separator symbols must not be keyboard focusable.
The last breadcrumb lacks an href value and therefore is omitted from 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 should ignore each separator icon.
Developer Guide
Breadcrumbs require no JavaScript, they are simply an ordered list of links & icons inside of a navigation landmark region.
1
<nav aria-labelledby="breadcrumbs_heading" class="breadcrumbs" role="navigation">
2
    <h2 class="clipped" id="breadcrumbs_heading">You are here</h2>
3
    <ol>
4
        <li>
5
            <a href="http://www.ebay.com">Home</a>
6
            <svg focusable="false" height="10" width="10">
7
                <use xlink:href="#icon-breadcrumb"></use>
8
            </svg>
9
        </li>
10
        <li>
11
            <a href="http://www.ebay.com">Clothing, Shoes &amp; Accessories</a>
12
            <svg focusable="false" height="10" width="10">
13
                <use xlink:href="#icon-breadcrumb"></use>
14
            </svg>
15
        </li>
16
        <li>
17
            <a href="http://www.ebay.com">Men's Shoes</a>
18
            <svg focusable="false" height="10" width="10">
19
                <use xlink:href="#icon-breadcrumb"></use>
20
            </svg>
21
        </li>
22
        <li>
23
            <a aria-current="location">Boots</a>
24
        </li>
25
    </ol>
26
</nav>
Copied!
The heading ('You are here') is typically hidden offscreen using the .clipped class.
While, the separator icon can be generated with CSS, we find that inline SVG offers a more accessible and flexible approach.
ARIA Reference
aria-current="location": provides AT with programmatic state on the breadcrumb that reflects the current site location.
role=navigation: creates a navigational landmark for AT.
​

Navigation

Fake Menu Button

Last modified 1yr ago

Copy link

Contents