Índice de páginas
Migas de pan
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.
Índice de apartados de esta página
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 unaria-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.