Breadcrumbs

Breadcrumbs display a users location within an application hierarchy. They act as a resource to help users navigate more efficiently and provide additional context.

Breadcrumbs do not replace the back button for web applications and should not be used to display how a user navigated. These are location breadcrumbs that help expose the hierarchy, not the particular clicks of a user.

Breadcrumbs are recommended when the primary and secondary navigation items are not always exposed. For example, breadcrumbs will enhance an application that uses vertical navigation or one that uses horizontal navigation where secondary menus are hidden. When using breadcrumbs, be sure to include them on every page throughout the application.

Breadcrumbs are NOT meant to be an alternative to displaying Vertical Navigation or Horizontal Navigation.

Breadcrumbs

Breadcrumbs

Breadcrumbs

  1. Primary Navigation Item: The primary navigation item should always be the first item listed in the breadcrumb string. If the primary navigation items do not have a landing page, this item should not be listed as a link.
  2. Icon: The “fa-angle-double-right” Font Awesome icon should be used to separate levels in the breadcrumb string.
  3. Links: All drill down pages that the user can navigate back to, should be shown as links in the breadcrumb string. The underline should appear when the user hovers over a link.
  4. Current Location: The end of the breadcrumb string should represent the page a user is currently viewing. This string should be bold text and should not be a link.
  5. Divider (optional): A horizontal divider may be present below the breadcrumbs depending on the page layout used inside an application. If this format is used, it should be used consistently throughout the application.

Vertical Navigation Example

Vertical Navigation Example

Horizontal Navigation Example

Horizontal Navigation Example

When secondary navigation items are hidden, breadcrumbs may be used in conjunction with horizontal navigation.

Example with Optional Page Title

Example with Optional Page Title

  1. Current Location: The end of the breadcrumb can also play the role of page title in an effort to conserve vertical space. This option would include use of a larger font for the end of the breadcrumb string. If this format is used, it should be used consistently throughout the application.