Migas de pan

Navegación

Los breadcrumbs o migas de pan sirven para identificar dónde nos encontramos dentro de la página web o aplicación. También nos ofrece una navegación secundaria hacia los niveles ascendentes de la página actual.

Anatomía
Accesibilidad
Buenas prácticas

Anatomía #

Las migas de pan se componen por una lista de enlaces que representan los “ascendientes” de la página actual, separadas por el símbolo > y en último lugar se encontrará el título de la página actual.

Accesibilidad #

Cómo funciona #

Rodeado con la etiqueta <nav>. Dentro se encuentra una lista con orden <ol> con una serie de <li> que contienen un enlace.
Los lectores de pantalla anuncian la navegación con Estás en: gracias a un aria-label incluido por defecto.
El propio componente añade al último item un aria-current=page y se resalta el texto con la etiqueta <strong> para anunciar que se trata de la página actual.

Basado en el patrón breadcrumb de W3C

Qué tener en cuenta #

Todos los atributos de accesibilidad se encuentran por defecto en la configuración del componente.

Buenas prácticas #

Este elemento se utiliza cuando hay tres o más niveles de navegación. Cuando hay menos de tres, se recomienda el uso de volver atrás.
No mezclar con otros sistemas de navegación en la página (por ejemplo, con un volver atrás).
Los enlaces que se muestran en las migas de pan deben hacer referencia a la arquitectura del sitio, no a la navegación que ha realizado el usuario.
El contenido de cada enlace debe ser el título de la página a la que se enlaza.