Migas de pan

Componentes

Migas de pan

La miga de pan o breadcrumb se utiliza para ubicar al usuario con relación con la arquitectura de información de la aplicación. Le permite navegar entre los niveles inferiores y superiores de la aplicación.

Vista Previa

Figma

Usos

Cuándo usar

En productos o plataformas con mucho contenido y diferentes niveles de jerarquía en la información.

En vista tablet y escritorio.

Cuándo no usar

Evitar en productos con un solo nivel de navegación ya que puede confundir y son innecesarias.

En vista móvil.

Comportamiento

El componente breadcrumb te permite siempre acceder a las páginas anteriores.

Cuando tenemos anchos de pantalla muy estrechos la miga de pan cambia por el componente Back Link con el nombre del nivel anterior al que se vuelve para no comprometer su legibilidad.

Estados

Visualización del componente miga de pan en estado por defecto

Default

Hover

Visualización del componente miga de pan en estado enfocado

Focus

Visualización del componente miga de pan en estado presionado

Pressed

Visualización del componente miga de pan en estado actual

Current

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

Es una lista ordenada que facilita saber cuántas migas de pan hay.

Breadcrumbs tiene los atributos aria-label o aria-labelledby.

Breadcrumbs tiene role="navigation" que asegura que sea un hito de navegación reconocido por las tecnologías de asistencia.

El último elemento del breadcrumbs, tiene el atributo aria-current="page".

Las flechas de separación tienen el atributo aria-label.

Cada elemento del breadcrumbs tiene role=”link” excepto el último item que tiene role=”span”

Los elementos del breadcrumb tiene el atributo aria-label.