Breadcrumbs

El Breadcrumb muestra dónde está la persona dentro de la jerarquía del sitio y le permite volver a los niveles superiores. Los niveles anteriores son enlaces y el último es la página actual.

Propiedades y configuraciones

Cuando usarlo

Úsalo en sitios con contenido organizado en varios niveles (fichas de trámites, beneficios, secciones de un portal), ubicado bajo el header y antes del título de la página, para que la persona sepa dónde está y pueda subir de nivel.

Buenas prácticas

Recomendado: Empieza en el inicio y refleja la jerarquía real

La ruta parte en “Inicio” y sigue la estructura del sitio, no el camino que hizo la persona.

Recomendado: Ubícalo bajo el header y sobre el título

Siempre en el mismo lugar, arriba del contenido, la persona lo encuentra sin buscarlo en cada página.

Recomendado: Usa los mismos nombres que los títulos de cada página

Cada nivel se llama igual que la página a la que lleva, para que la persona reconozca dónde aterriza.

Recomendado: Úsalo cuando el sitio tiene más de dos niveles

Aporta cuando la persona puede perderse en una estructura profunda, como beneficios agrupados por público y programa.

Malas prácticas

No recomendado: No lo uses para los pasos de un trámite

Los pasos de un formulario no son niveles de una jerarquía. Usa un indicador de progreso con el nombre del paso.

No recomendado: No lo conviertas en un historial de navegación

Mostrar las páginas visitadas, con repeticiones y búsquedas, no ayuda a ubicarse. Para volver atrás está el navegador.

No recomendado: No uses nombres largos en los niveles

Los niveles no se cortan: títulos completos hacen que la ruta ocupe varias líneas y compita con el título de la página.

No recomendado: No lo muestres en la portada ni con un solo nivel

En la página de inicio, un Breadcrumb con solo “Inicio” no informa nada y ocupa la zona más valiosa de la pantalla.

Recomendaciones de accesibilidad

Envuélvelo en un <nav> con nombre
El componente usa <nav aria-label="Breadcrumb">. Puedes traducir la etiqueta (“Ruta de navegación”) para que el landmark se anuncie en español, pero mantenla única en la página.

Usa una lista ordenada
Los niveles van en un <ol> con <li>, así el lector de pantalla anuncia cuántos niveles hay y en qué posición está cada uno.

Marca la página actual
El último nivel es un <span> con aria-current="page", no un enlace a sí mismo. Mantén ese atributo para que se anuncie como la página actual.

Oculta los separadores
Los chevron son decorativos y llevan aria-hidden="true"; no escribas separadores como texto (“>” o “/”), porque se leerían en voz alta.

Escribe niveles que se entiendan solos
Cada enlace debe tener un texto descriptivo (“Beneficios”, no “Volver”), porque las personas que navegan por enlaces los escuchan fuera de contexto.