≡En resumen
- La ruta de navegación complementa al menú principal: no lo sustituye.
- La de ubicación es la más útil; la de recorrido o historial suele confundir y duplica el botón Atrás.
- Solo compensa en webs con tres o más niveles; en webs planas o lineales sobra.
- Para ser accesible necesita un nav etiquetado, una lista ordenada y aria-current en la página actual.
- En móvil conviene recortarla al nivel superior inmediato y mantener zonas táctiles amplias.
01 ¿Qué es una ruta de navegación?
En español conviven tres nombres para lo mismo: ruta de navegación, el más descriptivo; migas de pan, calco del inglés que alude al cuento de Hansel y Gretel; y ruta de exploración, el que usa Google en Search Console y en su documentación. Si buscas la parte técnica del término (marcado BreadcrumbList, origen del nombre, ejemplos por tipo de web), la tienes en la ficha de breadcrumb o miga de pan. Aquí nos centramos en la experiencia de usuario: qué tipo elegir, cuándo usarla y cómo hacerla accesible y usable en el móvil.
La ruta de navegación es una consecuencia de la arquitectura de la información: solo puede ser clara si la jerarquía de secciones lo es.
02 Tipos de ruta de navegación: ubicación, atributos y recorrido
| Tipo | Qué responde | Ejemplo | Cuándo usarla |
|---|---|---|---|
| De ubicación (jerárquica) | ¿Dónde estoy dentro del sitio? | Inicio > Blog > Diseño > Artículo | Casi siempre: webs con varios niveles de categorías |
| De atributos | ¿Qué filtros o características definen lo que veo? | Zapatillas > Mujer > Talla 38 > Impermeables | Catálogos con facetas; mejor como complemento de la de ubicación |
| De recorrido (historial) | ¿Por dónde he pasado? | Portada > Búsqueda «casco» > Casco Aero | Casi nunca: repite el botón Atrás y cambia según cómo entraste |
La de atributos es útil en tiendas con muchos filtros, pero tiene un riesgo: si cada combinación de filtros genera una página enlazable, multiplicas las URL. Muéstrala como etiquetas de filtros activos, con opción de quitar cada una, y deja la ruta de ubicación como referencia fija.
03 Cuándo usar una ruta de navegación (y cuándo no)
Sí: tiendas online
Categorías, subcategorías y fichas forman una jerarquía profunda; la ruta evita que el usuario se pierda.
Sí: blogs y medios grandes
Da contexto temático a quien aterriza en un artículo y le invita a seguir en la categoría.
Sí: documentación y glosarios
Deja claro que la página pertenece a una colección, como Inicio > Diccionario > Término.
No: webs de una o dos capas
Si todo cuelga de la portada, la ruta repite el menú y ocupa espacio sin aportar.
No: procesos lineales
En un checkout o un formulario por pasos usa un indicador de progreso, no una ruta.
04 Cómo diseñar una ruta de navegación usable
- ✓Colócala arriba, bajo la cabecera y antes del título principal, siempre en el mismo sitio.
- ✓Empieza por la portada o por la sección raíz y termina en la página actual.
- ✓La página actual va al final, sin enlace y diferenciada visualmente.
- ✓Usa el signo > como separador y dale aire suficiente entre elementos.
- ✓Incluye solo niveles que sean páginas reales, nunca categorías sin URL propia.
- ✓Usa los mismos nombres que en el menú y en los títulos de las categorías.
- ✓Si una página pertenece a varias categorías, muestra una ruta principal fija.
- ✓Mantén un tamaño de letra menor que el del contenido: es navegación secundaria.
Una tienda de material de oficina tenía la ruta Inicio / Productos / Todos / Papelería / Cuadernos / A5 / Cuaderno X, con dos niveles («Productos» y «Todos») que no aportaban nada y un separador poco visible. Al reducirla a Inicio > Papelería > Cuadernos > Cuaderno X la ruta cabe en una línea, se lee de un vistazo y cada enlace lleva a una página útil. Este tipo de decisiones forman parte de un buen proyecto de diseño UX.
05 Accesibilidad de la ruta de navegación
El patrón de ruta de navegación de la guía de prácticas WAI-ARIA del W3C fija tres requisitos: la ruta va dentro de una región de navegación, esa región tiene un nombre accesible (con aria-label o aria-labelledby) y el enlace a la página actual lleva aria-current="page". Con eso, un usuario de lector de pantalla puede saltar directamente a la ruta y sabe cuál es su posición.
<nav aria-label="Ruta de navegación">
<ol>
<li><a href="https://www.appyweb.es/">Inicio</a></li>
<li><a href="https://www.appyweb.es/accesorios/">Accesorios</a></li>
<li><a href="https://www.appyweb.es/accesorios/cascos/" aria-current="page">Cascos</a></li>
</ol>
</nav>
Pon la etiqueta en el idioma de la página («Ruta de navegación» y no «Breadcrumb» en una web en español) y dibuja los separadores con CSS, por ejemplo con un pseudoelemento, para que el lector de pantalla no lea «mayor que» entre cada nivel.
06 La ruta de navegación en móvil
Solo el nivel superior
Muestra un único enlace del tipo «‹ Cascos» que lleva a la categoría padre. Es el patrón más limpio en pantallas pequeñas.
Niveles intermedios ocultos
Enseña portada y nivel padre y agrupa el resto en unos puntos suspensivos que se despliegan al tocarlos.
Desplazamiento horizontal
La ruta completa en una sola línea que se desliza con el dedo, empezando alineada al final.
Nunca en varias líneas
Una ruta que ocupa tres líneas empuja el contenido hacia abajo y parece un bloque de texto.
Cuida el tamaño de las zonas táctiles: los enlaces de una ruta son cortos y están muy juntos. El criterio 2.5.8 de las WCAG 2.2 pide objetivos de al menos 24 × 24 píxeles CSS o separación suficiente entre ellos, y el Nielsen Norman Group aconseja no encoger ni amontonar los elementos en móvil.
07 Ruta de navegación, SEO y cómo comprobar que funciona
Para los buscadores, la ruta es enlazado interno coherente: todas las fichas enlazan a su categoría con el mismo texto. Google recomienda que el marcado represente el camino típico de un usuario hasta la página en lugar de copiar sin más la estructura de la URL, y admite varias rutas para una misma página, aunque para el usuario conviene mostrar una sola.
-
1
Revisa la jerarquía
Comprueba que cada nivel de la ruta existe como página y que no hay categorías huérfanas o duplicadas.
-
2
Prueba con usuarios
Pide a varias personas que, desde una ficha, vuelvan a la categoría: si no ven la ruta, está mal situada o es poco visible.
-
3
Mide el uso
Registra los clics en la ruta como evento en tu analítica para saber qué niveles se usan.
-
4
Valida la accesibilidad
Navega con un lector de pantalla y con el teclado y comprueba el nombre de la región y aria-current.
-
5
Revisa el marcado
Confirma que el marcado de ruta de exploración coincide con lo que se ve en pantalla.
Para la prueba con usuarios bastan cinco o seis personas y tareas concretas; en nuestra guía de métodos de investigación UX tienes cómo plantearlas. Los fallos de marcado, las rutas incoherentes entre plantillas y las categorías sin enlazar aparecen enseguida en una auditoría SEO técnica.
Preguntas frecuentes sobre Ruta de navegación
Es una línea de enlaces, normalmente en la parte superior, que muestra dónde está la página actual dentro de la jerarquía del sitio, por ejemplo Inicio > Blog > Artículo. También se llama migas de pan o breadcrumb.
Ninguna: son el mismo elemento. Ruta de navegación es el nombre en español; breadcrumb (migas de pan) es el término inglés, y Google usa además «ruta de exploración».
Tres: de ubicación, que muestra la jerarquía del sitio; de atributos, que muestra los filtros aplicados; y de recorrido, que muestra el historial de la visita. La de ubicación es la recomendada.
En webs de una o dos capas de profundidad, en páginas de aterrizaje aisladas y en procesos lineales como un checkout, donde es mejor un indicador de pasos.
Colocándola en un elemento nav con aria-label, usando una lista ordenada y marcando la página actual con aria-current="page". Los separadores se añaden con CSS para que no se lean en voz alta.
No. Desde enero de 2025 Google muestra solo el dominio en los resultados móviles; en escritorio la ruta sigue apareciendo si la página tiene migas de pan o su marcado.
No es necesario: lo habitual es mostrarla como texto, sin enlace y diferenciada visualmente, porque enlazar a la página en la que ya estás no aporta nada.
Fuentes consultadas
Sobre el autor
CEO de appyweb, especialista en SEO, IA y desarrollo
Fundador de appyweb. Más de una década posicionando webs y tiendas online en Google y en las respuestas de la IA, y dedicado también al desarrollo de software y las automatizaciones.
Ver perfil y artículos → Ver perfil en LinkedIn ↗