Breadcrumbs

Breadcrumbs are a navigation element typically located at the top of a page. They show a user their current location and provide a means to navigate back or to related content.

Example

See the Pen Breadcrumbs by SHC-FED (@SHC-FED) on CodePen.0

Design Specs

  • Sears
  • Kmart

Desktop/Tablet

  1. Text is Open Sans Regular and 13px. The current page text is #001733. Active link text for previous pages in the breadcrumb string are #005ccc. forward slashes are #AAA
  2. There is 20px of padding above and below the breadcrumb text string.

Not Shown:

  • There is 7px of padding on either side of the forward slashes

Functional Specifications: Breadcrumb content reflects the current location in the hierarchy; it does not reflect user's history.

Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Desktop/Tablet

  1. Text is Helvetica Regular and 13px. The current page text is #333. Active link text for previous pages in the breadcrumb string are #a61111. forward slashes are #AAA
  2. There is 20px of padding above and below the breadcrumb text string.

Not Shown:

  • There is 7px of padding on either side of the forward slashes

Functional Specifications: Breadcrumb content reflects the current location in the hierarchy; it does not reflect user's history.

Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Production Examples

  • Sears
  • Kmart

Desktop/Tablet

An example of breadcrumbs on sears.com.

An example of breadcrumbs on sears.com.

Desktop/Tablet

An example of breadcrumbs on kmart.com.

An example of breadcrumbs on kmart.com.

When Do I Use This?

Breadcrumbs should be used on every page to provide a visual cue as to where the user is in the taxonomy of our site and where they can go to from that page.

Usage Guidelines

1. Consistent Styling

Keep breadcrumb location and styling consistent across the site (location, font size, color, weight, and separator types).

Consistency in styling and location makes it easier for the user to recognize and use the breadcrumbs.

Don't show breadcrumbs in different locations, or different styles on the same platform.

2. Consistent Formatting

Keep breadcrumb formatting and behavior consistent across the site.

Standard formatting includes Home as a link.

Don't omit Home from the breadcrumb path.

ADA Compliance

It is required that information is available about a user’s location within a set of web pages. To help, the use of ‘Breadcrumbs’ can be a useful mechanism for identifying page location. Breadcrumbs are a single line of text to show a page's location in the site hierarchy. Breadcrumbs help users know where they are in the structure of the complete website. They are especially important on complex websites that have more than one or two levels of navigation.

A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web pages, and may identify the current location within a series of Web pages. Source: W3C: Providing a Breadcrumb Trail

Rationale

Breadcrumbs are useful to users because it allows them to quickly see where they are on a site and allows them to navigate to previous pages. They're usually text only and occupy a small amount of screen real estate.

SHC design rationale:

  • The decision to display hierarchy vs user history is due to competitive research and in case of external entry to that page vs. starting from the Home page. It provides a quick answer to the question of "where am I?", and provides means to navigate to related content. Users use the browser back button if they want to actually go back to previous page.
  • "Home" is included in all use conditions due to internal user research (see below)
  • In all use conditions, we display a consistent pattern of links=blue, current location = grey (no link).
  • Breadcrumb content is text only because it is easy to maintain, crawl-able for SEO purposes, and provides the least visual noise (compare to previous "pill/ribbon" treatment).

Qualitative internal research studies (various):
  • users do read and interact with breadcrumbs
  • breadcrumbs should persist for all pages/flows to facilitate returning to previous page/level

Competitive analysis: The majority of those reviewed:
  • content was hierarchy-based
  • the word "home" is used for the anchor/first location
  • the divider was generally ">" or "/".
  • breadcrumbs on search results pages were inconsistent, but generally included the "{search term}"
  • Product detail pages generally displayed hierarchy

Research

Breadcrumb Navigation Increasingly Useful - NNG

One line of text shows a page's location in the site hierarchy. "User testing shows many benefits and no downsides to breadcrumbs for secondary navigation."

view article

E-commerce Breadcrumbs - Baymard

E-Commerce Sites Need 2 Types of Breadcrumbs (68% Get it Wrong) "Sears and Macy’s solves the history vs. hierarchy issue of breadcrumbs by including both. A history-based “Back to results” item, which takes users back to their previous product list with all filters retained, is appended to the hierarchy-based breadcrumbs." Refers to our Sears WCS PDP (old) as a good example - last breadcrumb location used javascript to trigger "back"

view article

12 Effective Guidelines For Breadcrumb Usability and SEO

Validates our design rationale, internal research; highlights breadcrumb value to users and business both.

view article

HA Performance Collection March 2014

Takeaway: Users do read and interact w/ breadcrumbs. See page 12

view full study

Toys Competitive Usability Study 2012

"When the breadcrumbs were present, people did use them. When there were no breadcrumbs users took a few seconds to figure out how to return....some went to Toys under the departments again [starting over]" Takeaway: Breadcrumbs should persist for all pages to facilitate returning to previous page/level (including curated or other non-taxonomy pages). See page 10

view full study

Baymard 2015 Mobile E-commerce benchmarking

m.Sears violated Guideline #67 - "Provide product page breadcrumbs...There’s no hierarchy breadcrumbs to help the user understand where they are in the site hierarchy or accommodate non-linear navigation".

view full study

Comments

  1. Carlos Torres

    On the Design Specs section we’re mentioning “Backslashes are #AAA” but what we use are slashes or forward slashes (/) instead.

    1. Karol Czyrka

      Thanks! fixed.

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.