Breadcrumb

A breadcrumb provides page context to help users navigate more efficiently and understand where they are in the application hierarchy.

Accessibility

To implement an accessible PatternFly breadcrumb component:

Give each item in the breadcrumb concise, descriptive text
Ensure each breadcrumb item can be navigated to and interacted with via keyboard and other assistive technologies such as a screen reader
Provide context to notify users if a breadcrumb item will open in a new tab or window
Provide an aria-label to the breadcrumb if there are multiple nav elements or breadcrumb components on the page
Follow the accessibility documentation for any other components used within a breadcrumb, such as a dropdown used within a breadcrumb item

For the PatternFly React library:

Pass in the isActive prop to the breadcrumb item whose page is currently active

For the HTML/CSS library:

Pass in the aria-current="page" attribute to the breadcrumb item whose page is currently active

At a minimum, a breadcrumb should meet the following criteria:

Each breadcrumb item has descriptive text.
Standard keyboard navigation can be used to navigate between each breadcrumb item or other focusable elements.Tab navigates to the next breadcrumb item or focusable element, and Shift + Tab navigates to the previous breadcrumb item or focusable element.
Users are able to tell whether a breadcrumb item will open in a new tab or window.This can be best achieved by rendering an icon for visual context, and passing in visually-hidden text via the pf-screen-reader class.
The breadcrumb has an aria-label if there are other nav elements or breacrumbs on the page.This helps users of assistive technologies to differentiate between multiple navigational elements.
Any other components used within a breadcrumb follow their own accessibility documentation.
The breadcrumb item whose page is currently active has the aria-current="page" attribute.This notifies users of assistive technologies which breadcrumb item corresponds to the page they are currently on.

The following React props have been provided for more fine-tuned control over accessibility.

Prop	Applied to	Reason
`aria-label="[text describing the breadcrumb]"`	`Breadcrumb`	Adds an accessible name to the breadcrumb's internal `nav` element.
`isActive`	`BreadcrumbItem`	Sets the `aria-current` attribute on the breadcrumb item, which indicates the current page to users of assistive technologies.

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class	Applied to	Reason
`aria-label="[text describing the breadcrumb]"`	`.pf-c-breadcrumb`	Adds an accessible name to the breadcrumb's internal `nav` element.
`aria-current="page"`	`.pf-c-breadcrumb__item`, `.pf-c-breadcrumb__link`	Indicates the current page to users of assistive technologies.

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH