Skip to main content

Breadcrumbs

The breadcrumb element is a secondary navigation pattern that shows hierarchy among content.

Specifications

  • Breadcrumbs progress from the highest level to the lowest, one step at a time.
  • Breadcrumb navigation starts with the homepage and ends with the current page.
  • All links, except the last one, in a breadcrumb should be clickable.
  • Breadcrumb trails are displayed horizontally before a page’s main content, in the top half of the page, below the primary navigation menu if a horizontal menu layout is used.
  • The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.
  • Nothing should go on the same line as the breadcrumb navigation.

Default

Accessible Option

Behaviors

  • For implementations with large numbers of sub-directories, make use of ellipses and dropdowns as shown in the example below

Editorial

  • Editorial will be provided by the hierarchy in a location based breadcrumb.
  • Editorial for path-based breadcrumbs are always dynamically generated by the steps taken in a workflow.
Last updated September 17, 2024.