≡En resumen
- La breadcrumb navigation es una ayuda de orientación: dice dónde estás y deja subir de nivel, no sustituye al menú.
- Debe mostrar la jerarquía del sitio, no el historial de la sesión.
- Solo tiene sentido en webs con más de dos niveles; en webs planas o procesos lineales sobra.
- En móvil conviene acortar la ruta, evitar que ocupe varias líneas y cuidar el tamaño de las zonas táctiles.
- La página actual cierra la ruta, sin enlace, y marcada con aria-current para lectores de pantalla.
01 ¿Qué es la breadcrumb navigation?
Si buscas qué es el elemento en sí, su origen y su impacto en SEO, lo explicamos en la entrada de breadcrumb o migas de pan. Aquí nos centramos en el patrón de navegación: cuándo conviene, qué variantes existen y cómo diseñarlo para que la gente lo use.
Dentro de la arquitectura de la información, las migas forman parte de los sistemas de navegación junto al menú global, la navegación local de cada sección y los enlaces contextuales. Su función es la orientación: responder a «¿dónde estoy?» y «¿qué hay por encima?».
02 Cuándo usar la navegación por migas de pan (y cuándo no)
| Tipo de sitio o página | ¿Migas de pan? | Motivo |
|---|---|---|
| Tienda online con categorías y subcategorías | Sí | El usuario salta entre ficha y listado constantemente |
| Documentación, glosarios y centros de ayuda | Sí | Muchas páginas profundas a las que se llega desde buscadores |
| Blog con categorías temáticas | Recomendable | Da contexto y lleva a más artículos del tema |
| Web corporativa de 5-10 páginas | No | La estructura es plana y el menú ya lo muestra todo |
| Checkout, registro o formularios por pasos | No | Es un proceso lineal: usa un indicador de pasos |
| Landing page de campaña | No | Distrae del objetivo de conversión |
03 Tipos de breadcrumb navigation
De ubicación o jerárquica
Muestra la posición fija de la página en la estructura: Inicio › Hogar › Cocina › Sartenes. Es la más útil y la que recomiendan las guías de usabilidad.
De atributos
Refleja los filtros o características aplicados: Portátiles › 16 GB › 14 pulgadas. Útil en catálogos con facetas, a menudo con opción de quitar cada filtro.
De ruta o historial
Enumera las páginas visitadas en la sesión. Duplica el botón Atrás, cambia según cómo entraste y se desaconseja.
Híbrida
Combina una ruta jerárquica con los filtros activos debajo. Es habitual en grandes e-commerce para no perder la referencia de categoría.
04 Patrones de diseño: escritorio y móvil
| Patrón | Cómo se ve | Cuándo usarlo |
|---|---|---|
| Ruta completa | Inicio › Deporte › Running › Zapatillas › Modelo X | Escritorio y rutas de hasta 4-5 niveles |
| Ruta truncada con elipsis | Inicio › … › Zapatillas › Modelo X | Rutas muy largas; los niveles ocultos se despliegan al pulsar |
| Solo el nivel superior | ‹ Zapatillas | Móvil: funciona como un «volver a la categoría» |
| Desplazamiento horizontal | Una línea que se desliza con el dedo | Móvil cuando todos los niveles aportan |
| Migas con filtros | Ruta jerárquica + etiquetas de filtros con × | Listados con navegación por facetas |
Escritorio: Inicio › Electrodomésticos › Cocina › Cafeteras › Cafetera superautomática Z.
Móvil: ‹ Cafeteras. Se pierde el contexto completo, pero se conserva lo que más se usa en pantallas pequeñas: volver al listado sin perder el scroll ni los filtros.
Los separadores más reconocibles son ›, > y /. Colócalos con espacio a ambos lados, con un tamaño de texto algo menor que el cuerpo y un contraste suficiente. La ubicación estándar es arriba, bajo la cabecera y sobre el título principal: ahí es donde el usuario la busca.
05 Las 11 pautas de NN/g para migas de pan
- ✓No sustituyen a la navegación global ni local: la complementan.
- ✓Muestran la jerarquía del sitio, no el historial de la sesión.
- ✓En sitios polijerárquicos, enseñan una sola ruta principal.
- ✓Incluyen la página actual como último elemento.
- ✓La página actual no es un enlace.
- ✓Solo incluyen páginas reales, no categorías sin página propia.
- ✓No hacen falta en sitios planos o lineales.
- ✓Empiezan con un enlace a la página de inicio.
- ✓En móvil, evitan ocupar varias líneas.
- ✓En móvil, ofrecen zonas táctiles de tamaño suficiente, y si la ruta es larga se acorta a los niveles inmediatos.
Las pautas proceden del artículo de Page Laubheimer publicado en diciembre de 2018 y revisado en 2026. Las dos últimas del listado original (tamaño táctil y rutas acortadas) se han agrupado aquí en un solo punto.
06 Accesibilidad de la navegación por migas de pan
Región de navegación
El conjunto va dentro de un elemento nav, para que los lectores de pantalla lo anuncien como bloque de navegación.
Etiqueta propia
Ese nav lleva aria-label o aria-labelledby (por ejemplo, «Ruta de navegación») para distinguirlo del menú principal.
Página actual marcada
El último elemento lleva aria-current="page"; si no es enlace, el atributo es opcional según la guía del W3C.
Separadores decorativos
Se dibujan con CSS para que el lector de pantalla no lea «mayor que» entre cada nivel.
07 Errores de UX frecuentes con las migas de pan
| Error | Qué provoca | Solución |
|---|---|---|
| La ruta cambia según desde dónde llegas | El usuario no aprende la estructura | Fija una categoría principal por página |
| Niveles que no son páginas | Clics que llevan a un 404 o a la portada | Incluye solo niveles con página propia |
| Nombres distintos a los del menú | Parece que son secciones diferentes | Usa las mismas etiquetas en menú y migas |
| Texto diminuto en móvil | Toques erróneos y frustración | Área táctil amplia o solo el nivel superior |
| Migas repetidas arriba y abajo | Ruido visual sin beneficio | Una sola instancia, en la parte superior |
| Usarlas en lugar del menú | Secciones inaccesibles desde la portada | Mantén la navegación global completa |
En catálogos con miles de productos, estos fallos se multiplican. Por eso, en un proyecto de una agencia de diseño de tiendas online la ruta de categorías se define antes de maquetar, junto con los filtros y la navegación por facetas.
08 Cómo comprobar si tus migas de pan funcionan
-
1
Mide los clics
Registra un evento en tu herramienta de analítica cada vez que alguien pulsa un nivel de las migas y compáralo con el uso del menú.
-
2
Observa el comportamiento
Los mapas de calor y las grabaciones muestran si se ven, si se pulsan en móvil y si hay toques fallidos.
-
3
Haz pruebas con usuarios
Pide a participantes que, desde una ficha, vuelvan a ver más productos de la categoría y observa qué camino eligen.
-
4
Revisa la coherencia
Rastrea el sitio para detectar rutas distintas para una misma página o niveles que devuelven errores.
Herramientas como Hotjar o Microsoft Clarity, que comparamos en la guía de mapas de calor web, te dirán si las migas se usan de verdad. Para validar etiquetas y jerarquía antes de diseñar, los métodos de investigación de usuarios como el card sorting son los más eficaces. Si prefieres que lo revise un equipo, nuestro servicio de diseño UX incluye la navegación completa del sitio.
Preguntas frecuentes sobre Breadcrumb navigation
Es un patrón de navegación secundaria que muestra, como una línea de enlaces, la ruta jerárquica hasta la página actual y permite subir de nivel con un clic.
Significa «navegación por migas de pan» o «navegación por ruta». El nombre alude al rastro de migas del cuento de Hansel y Gretel.
Hay tres principales: de ubicación o jerárquica (la más recomendable), de atributos (muestra filtros aplicados) y de ruta o historial (páginas visitadas, desaconsejada).
En webs planas de pocas páginas, en landing pages de campaña y en procesos lineales como un checkout, donde es mejor un indicador de pasos.
Deben ocupar una sola línea y tener zonas táctiles amplias; si la ruta es larga, se muestra solo el nivel superior o se permite el desplazamiento horizontal.
No. La página actual cierra la ruta como texto, sin enlace, y se marca con aria-current="page" para los lectores de pantalla.
El menú da acceso a las secciones principales de todo el sitio; las migas solo muestran el camino hasta la página en la que estás. Son complementarios.
Fuentes consultadas
Sobre el autor
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.
Ver perfil y artículos →