Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Breadcrumbs
Breadcrumbs
The breadcrumb is used to locate the user in relation to the information architecture of the application. It allows the user to navigate between the lower and upper levels of the application.
Uses
How to use
In products or platforms with a lot of content and different levels of information hierarchy.
In tablet and desktop view.
How not to use
Avoid products with only one level of navigation as they can be confusing and are unnecessary.
In mobile view.
Behaviour
The breadcrumb component allows you to always access previous pages.
When we have very narrow screen widths the breadcrumb changes to the Back Link component with the name of the previous level to which it returns so as not to compromise its readability.
States
Default
Hover
Focus
Pressed
Current
Accessibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
It is an ordered list that makes it easy to know how many breadcrumbs there are.
Breadcrumbs has the attributes aria-label or aria-labelledby.
Breadcrumbs has role="navigation" which ensures that it is a navigation milestone recognised by assistive technologies.
The last element of the breadcrumbs, has the attribute aria-current="page".
The separator arrows have the aria-label attribute.
Each element of the breadcrumbs has role="link" except the last item which has role="span".
The breadcrumb elements have the attribute aria-label.
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
