Complete breadcrumb string with all items visible.
Long breadcrumb path shortened to display the last 2 items with hidden links indicated by ellipsis.
To ensure that usage of this component complies with accessibility guidelines:
- Indicate the current page location within a hierarchy using breadcrumbs
- Do not include the current page in breadcrumb path because the
aria-currentattribute is not defined for the last item
This component has compliance with WCAG guidelines by:
- Using text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background but only when displayed on light backgrounds
- Defining the attribute
<nav>element to identify the structure of
cdr-breadcrumbas a breadcrumb path for assistive technologies
- Defining that the ellipsis button contains the
aria-expanded=’false’attribute when the user has the ability to expand the breadcrumb path