Breadcrumbs Draft Guidance
Breadcrumbs are a form of navigation that help visitors understand where they are in a website.
Breadcrumbs convey where the current page of a website fits into the hierarchy of the overall site structure. They also include a series of links that allow you to navigate up through the hierarchy. These features are particularly relevant when a visitor has landed on an interior page from a web search or link from another site.
You are here. When you need communicate where the current page is located in the website hierarchy. This is the most common usage.
How you got here. In some cases, it may help to use breadcrumbs to communicate a visitor's path to the current location, such as when navigating through search results. This is a less common scenario.
Simple sites with few levels. If the website is not very deep and the context for the current page is clear from the main navigation, you can omit breadcrumbs.
Main landing pages. For the homepage and landing pages of the main sections, you can omit breadcrumbs. They are more useful at deeper levels of the site where the hierarchy is not immediately apparent from the main navigation.
Side navigation. When side navigation is used in combination with main navigation, it may be redundant to include breadcrumbs.
Steps in a process. Although there are similarities between breadcrumbs and a step-by-step wizard process, typically wizard navigation will be more prominent than the way breadcrumbs are used. Also, it may be confusing to see two sets of breadcrumbs performing different functions on the same page. Instead, consider using a button group.
Parent only on small screens. By default, the breadcrumb component collapses to display only a link to the parent page at small widths. Consider keeping this context instead of simply hiding the component.
Tap targets on small screens. Although breadcrumbs are frequently displayed using smaller text, make sure the text is not too small to easily tap at small widths.
Complex sites with many levels. If a website contains many levels of hierarchy, it can become overwhelming and cumbersome to display the full breadcrumbs, even at larger widths. Consider setting the min-width token to a larger screen size and avoiding wrapping for deep sites.
Supplemental navigation. Use breadcrumbs to supplement, not replace, main navigation and side navigation.
Use the nav element. This allows assistive technology to present the breadcrumbs in context as a navigational element on the page.
Use ordered lists and list items. Use an ol for breadcrumbs and an li for each item. This allows assistive technology to enumerate the items in the breadcrumbs and allows shortcuts between list items.
Use ARIA markup for additional context. Use aria-label="Breadcrumbs" on the main element and aria-current="page" on the current page.
Do we want to include settings here?
TBA