Breadcrumbs provide secondary navigation to help users understand where they are in a website. In addition, the breadcrumb tells search engines how the site is structured, and it can be displayed in search results. This can improve rankings, and provide users with additional context.
Complex levels. Use a breadcrumb when content is more than 2 levels deep.
When to consider something else
Simple sites. Do not use a breadcrumb if the site or experience has a flat structure (i.e. only 2 levels of content or less)
Irrelevant hierarchy. Do not use a breadcrumb if the path or hierarchy of the page is irrelevant to the user or experience.
One way exit. Do not use a breadcrumb if it would create a way for a user to exit or navigate away from a user flow that they are unable to return to, or would result in a loss of data.
Breadcrumbs should be based on content hierarchy, not on the user’s click path or browser history. For online applications and forms, the breadcrumb represents the forms’s placement within the site hierarchy, it does not track the steps or progress of the form flow. In other words, the breadcrumb will only show up to the form as the current page segment, and will maintain that display while the user goes through the flow. For navigation through the steps of the form flow, forward and backward CTAs can be provided as part of the main content as appropriate.
Include one, include all. If you use a breadcrumb for one page in a hierarchy, always use a breadcrumb for all pages within that hierarchy.
Make current page a link. Use a link for the current page for robustness. While it may sound counterintuitive to link to the current page in this component, it makes sense to include this as a link so screen readers voice the current page link whether the user navigates by element or by tabbing. Making the current page a link rather than text makes it a focusable and clickable element. It also follows WAI-ARIA Authoring Practices Guide (APG) guidances which states that an a element with aria-current="page" should represent the current page.
NOTE: The v1 version of this component has not been updated. Please use the v3 version of this component.