Breadcrumbs

Structure

The breadcrumbs is built with the HTML nav element and a list of unordered links using <ul> and <li>, making it a navigation landmark.

Using HTML elements under the hood ensures that elements within Breadcrumbs maintain their inherent interactivity and accessible roles for assistive technology.

ARIA

table

Element	Attribute	Description
Breadcrumbs container	aria-label	Included by default to denote its function to screen reader users.

Keyboard

Breadcrumbs

table

Key	Function
Enter	Activates a breadcrumb item.
Tab	Moves focus to the next focusable breadcrumb item or element.
Shift+Tab	Moves focus to the previous focusable breadcrumb item.

Ellipsis dropdown

table

Key	Function
Enter/Space/↑/↓	Opens the dropdown if closed.
Escape/Tab	Closes the dropdown if open.
↑	Moves to the previous item in the dropdown.
↓	Moves to the next item in the dropdown.