Locator Element: Breadcrumbs
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:
Example Breadcrumbs for Produce Section of an Online Grocery Store
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
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:
- 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
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:
- 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.
- Opens a Purchasing Application at its Home page: NO Breadcrumbs
- Selects the "Orders" tab: NO Breadcrumbs -- page location indicated by tab
- 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)
- Clicks the Update icon to drill down on an order in the table: START Breadcrumbs
"Update Order" Page Location Indicated by Breadcrumbs
- Selects a line from the order to display a further drill down page: EXTEND Breadcrumbs
"Update Line" Page Location Indicated by Breadcrumbs
- Completes step by step and returns to Update Order page (Step 4): Redisplay Breadcrumb "Orders"
- Clicks Apply to make changes and return to table of orders (Step 3): NO Breadcrumbs -- page location is again indicated by tab/navigation
- 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
Breadcrumbs with Combined Tab and Horizontal Navigation Link
Page-level breadcrumbs may be either horizontal or vertical:
- 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.
- 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
- 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 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: Hierarchical Levels of Information
Breadcrumbs Before Wrapping
Breadcrumbs Wrap After Browser Window Is Resized
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:
||Brown (Text will be a link); #663300
||Arial, 9pt (CSS), Regular
||Arial, 9pt (CSS), Regular
17-Jun-2002: BLAF 3.0 may investigate Table breadcrumbs
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.