Breadcrumbs

Rules

• Breadcrumbs should be placed at the top of a page, typically below the header
• Link labels should match the title of the page
• Breadcrumbs should always represent an accurate navigation hierarchy
• Breadcrumb labels must remain consistent throughout an experience

Constraints

• Breadcrumbs will fill the available width of their parent container, but wrap when necessary

Principles

• Breadcrumb navigation functions both visually and programmatically to help users understand where they are in a nested navigation tree, and to be able to quickly traverse the available hierarchy (upstream only)

Accessibility

• For breadcrumb navigation to be accessible it should be wrapped in a nav element and use aria-label. In this way the breadcrumbs can easily be navigated to with landmarks. See configuration table below.

breadcrumb Required	Place on the <ol> that contains the links
active Required	Place on the <li> that contains the active page (this should be the last item in the context of breadcrumbs)

aria-label Required	Use on the <nav> element that is the parent of the .breadcrumb list to identify it as breadcrumb navigation for assistive technology when viewing a list of landmarks, e.g. aria-label="Breadcrumb"
aria-current="page" Required	Use on the <a> that represents the current page

---

• Last updated May 21, 2018
• Not currently authorable
• Core - Breadcrumbs