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.
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.
Anatomía del componente
Cargando anatomía…
- Lista
- Ítem
- Enlace
- Separador
- Página actual
Propiedades y configuraciones
Profundidad
La ruta parte en Inicio y suma un nivel por cada sección de la jerarquía, hasta la página actual.
El caso más común: portada, sección y página.
En contexto
El Breadcrumb va bajo el header y sobre el título, y su último nivel se llama igual que el título de la página.
En la ficha, la ruta lleva de vuelta al listado de trámites.
Subsidio eléctrico
Apoyo para pagar la cuenta de la luz. Revisa si cumples los requisitos y postula en línea.
Vivienda
18 beneficios para comprar, arrendar o mejorar tu vivienda.
Oficinas
Encuentra la oficina más cercana y revisa sus horarios de atención.
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: 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.
Última actualización: Octubre de 2026