Breadcrumbs
Breadcrumbs are navigational links that help users navigate within a website's hierarchy. Breadcrumbs show users their current location and enable them to easily move up to a parent level or previous step.
Overview
Each page link in the breadcrumb is reached by Tab and activated by Enter. The current page is not a link. If the breadcrumb is truncated, the ellipsis button for the overflow menu is in the tab order.
Design recommendations
Treat separators as text when it comes to contrast. Use separators that have AA contrast against their background.
Development considerations
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.
Hide separators from screen readers. The separators between links in the breadcrumbs should not be read by screen readers.