Theme

Style utilities

DescriptionList

OptionCardGroup

SegmentedControl

ConditionViewer

FormattedDateTime

FormattedRelativeTime

KeyboardShortcut

StatusIndicator

ConfirmationModal

Data visualization

Alpha

Series and legend

Menu keyboard shortcuts

Setup flow with a preview

Componentsv3.6.0

Breadcrumbs

Storybook Aria pattern

Breadcrumbs provide information about a user's current location within the application's page hierarchy.

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.
Current breadcrumb	`aria-current`	Set to `page` on the last breadcrumb, so the current location is announced rather than being distinguishable only by styling. Applied to the link, or to the text when the last item is not rendered as a link.

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.

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.

On this page

Ellipsis dropdown