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


Breadcrumb is a one-line navigational element that supports wayfinding: it aids the users in finding their current location within the hierarchical structure of a website. Breadcrumb navigation is a good choice in terms of usability because it never causes problems in user testing and takes up very little space on the page.


Use when

  • You need to inform the user where they are in the hierarchy of the site.
  • The user needs to navigate back to a higher level page.
  • The application has a complex, multi-layer architecture that’s more than 2 levels deep.

Don’t use when

  • Primary navigation is needed instead. Breadcrumbs are always treated as secondary and should never replace primary navigation.
  • Employing a vertical model tree component.
  • If a lower-level page is (or can be put) in more than one parent category.
  • You want to show the user’s history, path.
  • Your product has a flat hierarchy that’s only 1 or 2 levels deep.


  • 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.


Accessible Option


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


  • 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.


  • The default breadcrumb navigation is not accessible. Use the accessible option for compliance.
  • Place breadcrumb navigation in a nav element. The nav element should also be marked with aria-label="breadcrumbs" to clearly describe the type of navigation.
  • Breadcrumbs should remain in the same relative order and location on each page.
  • The link text should be clear, reflect the breadcrumb location accurately, and easy to understand for all users.
  • Make sure the tab order matches the hierarchy.
  • Apply aria-current="page" to the last item of the set to indicate that it represents the current page.
  • For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.
What's Changed
04/08/20211.0.1More guidance added based on best practices.J. Wittmeyer
11/23/20201.0.0Accessible option added.E. Bohn, L. Kause, N. Springer