Locator Element: Breadcrumbs

Last Updated 25-Mar-2004

General Description

Breadcrumbs are a series of text strings and links that show the user's location within the hierarchy of an application. When a user navigates through the higher levels of an application, the tabs/navigation structure shows the current page's location in the application hierarchy, so breadcrumbs are not required. However, when the user navigates or "drills down" one or more levels below the tabs/navigation, breadcrumbs are needed to show the location of the page.

The following breadcrumb example demonstrates one type of application hierarchy -- in this case, a user is searching through an online grocery store to locate a specific type of apple: This guideline contains the following sections:

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Mervyn Dennehy
UI Models - all Models
Example Products - all Products
Related Guidelines - Tabs/Navigation Guidelines, Text Standards, Page Titles, Intraapplication Navigation

Interaction and Usage Specifications

General Principles

When to Use Breadcrumbs

Breadcrumbs are used to help users locate the current page within the hierarchy of an application. Breadcrumbs are not used in the following situations, because the location is already evident: The following example sequence follows a user as he/she navigates through an application; each step indicates whether the page has breadcrumbs or not; steps three, four, and five are shown in the images below:
  1. Opens a Purchasing Application at its Home page: NO Breadcrumbs
  2. Selects the "Orders" tab: NO Breadcrumbs -- page location indicated by tab
  3. Selects the Horizontal Navigation link "Pending" to display a table of pending orders: NO Breadcrumbs -- page location indicated by tab/navigation

  4. "Pending Orders" Page Location Indicated by Tab/Navigation Structure (no breadcrumbs)
    Page without breadcrumbs

  5. Clicks the Update icon to drill down on an order in the table: START Breadcrumbs

  6. "Update Order" Page Location Indicated by Breadcrumbs
    Update Orders page with breadcrumbs

  7. Selects a line from the order to display a further drill down page: EXTEND Breadcrumbs

  8. "Update Line" Page Location Indicated by Breadcrumbs
    Update Lines page with breadcrumbs

  9. Completes step by step and returns to Update Order page (Step 4): Redisplay Breadcrumb "Orders"
  10. Clicks Apply to make changes and return to table of orders (Step 3): NO Breadcrumbs -- page location is again indicated by tab/navigation

Breadcrumb Syntax

Breadcrumbs with Combined Tab and Horizontal Navigation Link
Use of colon in breadcrumbs to combine tab and horizontal navigation

Horizontal and Vertical Breadcrumbs

Page-level breadcrumbs may be either horizontal or vertical:
Vertical Breadcrumbs
Vertical breadcrumbs

Visual Specifications

Visual Principles

Placement of Breadcrumbs

Breadcrumbs are placed in a certain vertical location on a page. There are also other components that are positioned in this relative area, including message box, header (primary header on page or page title, etc. For the specific vertical layout order and placement of breadcrumbs compare to other components, see Component Order.

Breadcrumbs and Wrapping

Breadcrumbs wrap within a page depending on the size of the browser window. The wrap occurs to the right of the greater-than symbol that follows after the breadcrumb text string, and not within the text string itself. It is recommended to use short text strings for breadcrumbs. Please follow the usage specificationss in the Page Title and Breadcrumbs Guideline.

Breadcrumbs Before Wrapping

Breadcrumbs Wrap After Browser Window Is Resized

Breadcrumb Examples and Flows

Breadcrumbs: Hierarchical Levels of Information

Breadcrumbs with Example Hierarchical Information

Breadcrumbs: Level 1 Tab Selection Defaults Level 2 Information

The following three flow diagrams illustrate when breadcrumbs should be omitted, and when they should be used:

Home page breadcrumb flow

Flow showing that step by step pages have no breadcrumbs

Deeply nested flow

Text Styles and Colors

  Active Label Inactive Label
Text Color Brown (Text will be a link); #663300 Black; #000000
Text Style Arial, 9pt (CSS), Regular Arial, 9pt (CSS), Regular

Open/Closed Issues