Locator Element: Breadcrumbs

General Description

Example Breadcrumbs for Produce Section of an Online Grocery Store

• General Principles
• When to Use Breadcrumbs
• Breadcrumb Syntax
• Horizontal and Vertical Breadcrumbs
• Visual Principles
• Breadcrumb Examples and Flows
• Text Styles and Colors

Guideline Attributes

Interaction and Usage Specifications

General Principles

• Breadcrumbs reflect location in the application hierarchy, regardless of the navigation path used to reach the current page.
• Breadcrumbs are not used on every page within an application. When used, they should be placed consistently within similar page templates of the application.
• Breadcrumbs always include the higher levels shown in the tabs/navigation, along with any hierachical levels traversed to reach the current page.
• The root or first text string in the breadcrumb should be the top level of the hierarchy structure. If the page contains tabs, then the root of the breadcrumbs is the current tab.
• As the user drills down to more content and/or functionality, the breadcrumbs extend to continue to track the location of the current page.
• Breadcrumbs consist exclusively of links to parent pages in the application hierarchy, and do not include a link or text for the current page, which is already identified by the page title.
• Breadcrumbs provide links to navigate up through the application hierarchy, but designers should not rely on these links as the primary navigation method.
• HGrid components have their own distinctive type of breadcrumbs. For details, see the HGrid guideline.
• The Return to XXX link also enable users to navigate upwards through an application hierarchy. See the Links guideline for details.

When to Use Breadcrumbs

• On pages where the tabs/navigation structure (any approved combination of Tabs, Horizontal Navigation, Side Navigation, and SubTabs) indicates the location of the current page in the hierarchy. See the image below for an example.
• On Home pages.
• On message pages.
• On LOV pages.
• In step by step processes with a train. In train processes, the process name can be concatenated in the page title with the step name, instead of using breadcrumbs. See Step by Step Page Template guidelines for details.

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


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



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


"Update Order" Page Location Indicated by Breadcrumbs



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


"Update Line" Page Location Indicated by Breadcrumbs



6. Completes step by step and returns to Update Order page (Step 4): Redisplay Breadcrumb "Orders"
7. 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

• Breadcrumb text must clearly identify the pages in the hierarchy. If page titles are short, use the full page title; if they are long they should be shortened to avoid overly long breadcrumbs. When shortening page titles, make sure they contain the necessary information to distinguish them from each other. Note that the distinctive part of a page title is often the trailing section.
• When an application features both tabs and horizontal navigation, selection of a tab may also default to selection of the first horizontal navigation section. Consequently, on subordinate drill-down pages, breadcrumb links to both the parent tab and the parent horizontal navigation page would have the same target. To avoid this problem, combine the tab label with the default horizontal navigation link to form a single link in the breadcrumbs, using a colon (:) as a separator, such as "Projects: Overview". See the image below for an example.
  Note: If you navigate to another horizontal navigation section within the same tab structure, the breadcrumbs will not contain a colon. In the example below, if you select the Pending tab and then choose to update an order, the breadcrumb should read "Orders > Pending"
• For detailed breadcrumb syntaxes for each page template, see the Page Titles guideline.

Horizontal and Vertical Breadcrumbs

• Horizontal breadcrumbs: This is the standard form, where levels are indicated from left to right. Breadcrumbs for deeply nested pages or pages with long titles may wrap to one or more lines.
• Vertical breadcrumbs: This form is only used in exceptional circumstances, as it indicates levels from top to bottom, and thus uses up a large amount of space. Consider vertical breadcrumbs only if the following conditions are present:
• Page titles are long and cannot be readily abbreviated or truncated (such as lists of academic publications)
• Pages are both deeply nested within the hierarchy, and have very little content.

Visual Specifications

Visual Principles

• Breadcrumbs consists of greater than symbols (>) and linked text strings.
• Each text string is a label from the hierarchical navigation of the product (label of level 1, level 2, level 3 tab/navigation, and successive drill-down page titles.)
• The greater than symbol (>) always precedes a link except for the first label of the entire breadcrumb string.
• All breadcrumb labels are linked with href tags.
• Greater than symbols (>) are never linked with href tags.
• The color definition of the greater than symbol (>) is the same as the active or inactive label that trails it.
• A colon (:) is used as a separator between tab and horizontal navigation labels when there is no unique page associated with the tab level.
  For instance, if a user selects a Level 1 tab, the page redraws with one of the level 2 navigation sections as a default. When the user navigates to a third level, the breadcrumb for level 1 and level 2 would be separated by a colon rather than by spaces and a greater than symbol.
• There should be 2 spaces before and 2 spaces after each greater than symbol.
• There should be no space before and 1 space after each colon.

Placement of Breadcrumbs

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

Text Styles and Colors

Open/Closed Issues

Open Issues

17-Jun-2002: BLAF 3.0 may investigate Table breadcrumbs



Closed Issues

25-Mar-2004: Removed space in front of colon in breadcrumb.
15-Nov-2003: Removed trailing text in breadcrumb that was formerly used to indicate the current page.
12-Jan-2003: Changed position of (>) symbol in vertical breadcrumbs from in front to behind the links.