breadcrumbs

Components

breadcrumbs

The bread crumb or breadcrumb is used to locate the user in relation to the information architecture of the application. It allows you to navigate between the lower and upper levels of the application.

Preview

Figma

Uses

When to use

In products or platforms with a lot of content and different levels of hierarchy in the information.

In tablet and desktop view.

When not to use

Avoid on products with a single level of navigation as they can confuse and are unnecessary.

In mobile view.

Behaviour

The breadcrumb component always allows you to access the previous pages.

When we have very narrow screen widths the bread crumb changes to the Back Link component with the name of the previous level to which it becomes so as not to compromise its readability.

States

Default

Hover

Focus

Pressed

Current

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

It’s an ordered list that makes it easy to know how many breadcrumbs there are.

Breadcrumbs has either the aria-label or aria-labelledby attributes.

Breadcrumbs has a role="navigation" that ensures it is a recognized navigation milestone by assistive technologies.

The last element of the breadcrumbs, has the aria-current="page" attribute.

The separation arrows have the aria-label attribute.

Each element of the breadcrumbs has role=”link” except the last item that has role=”span”

The elements of the breadcrumb have the aria-label attribute.