eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Introduction
  • Working Examples
  • Terminology
  • Best Practices
  • Interaction Design
  • Developer Guide
  • ARIA Reference
  1. Navigation

Breadcrumbs

A list of links representing current location in site hierarchy.

PreviousNavigationNextFake Menu Button

Last updated 3 months ago

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

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.

<nav aria-labelledby="breadcrumbs_heading" class="breadcrumbs" role="navigation">
    <h2 class="clipped" id="breadcrumbs_heading">You are here</h2>
    <ol>
        <li>
            <a href="http://www.ebay.com">Home</a>
            <svg focusable="false" height="10" width="10">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a href="http://www.ebay.com">Clothing, Shoes &amp; Accessories</a>
            <svg focusable="false" height="10" width="10">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a href="http://www.ebay.com">Men's Shoes</a>
            <svg focusable="false" height="10" width="10">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a aria-current="location">Boots</a>
        </li>
    </ol>
</nav>

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.

Experience the breadcrumbs pattern in action on our companion .

Examine the required markup structure in our .

View a fully styled example on our .

The heading ('You are here') is typically hidden offscreen using the class.

eBay MIND patterns examples website
Bones GitHub project
eBay Skin website
.clipped
Screenshot depicting breadcrumb hierarchy on eCommerce site.