Migas de pan: cuándo las necesita una web y cómo diseñarlas

Las migas de pan (breadcrumbs) son el breve recorrido de enlaces, normalmente en la parte superior de la página, que muestra dónde se sitúa esa página dentro de la estructura de la web, por ejemplo Inicio > Zapatillas > Zapatillas de running, y permite volver al nivel anterior con un clic. Una web las necesita cuando tiene más de dos niveles de páginas, como una tienda online, una web de servicios grande o una base de conocimiento; una web pequeña y plana no suele necesitarlas.

Última actualización: 31 de octubre de 2026.

Esta guía explica los tipos de migas de pan, cuándo ayudan y cuándo estorban, cómo diseñarlas para escritorio y móvil, cómo hacerlas accesibles, cómo ayudan a los buscadores y los errores que conviene evitar. Está pensada para responsables de marketing, product owners y diseñadores que preparan una web nueva o un rediseño.

En Odduel, una agencia creativa y tecnológica en Barcelona y São Paulo, nuestro servicio de diseño UX/UI diseña la navegación de webs, tiendas y apps. En nuestra propia web, cada artículo y cada caso incluyen una ruta de migas de pan en sus datos de página, y cada artículo tiene una forma visible de volver a la lista de la que se llegó; los consejos que siguen salen de ese trabajo y sirven para cualquier web.

En resumen: usa migas de pan cuando tu web tenga tres o más niveles y la gente llegue a páginas profundas desde el buscador. Muestra la ruta dentro de la estructura, no el historial del visitante; mantenla corta, en letra pequeña arriba; haz que cada nivel sea un enlace salvo la página actual; márcala como zona de navegación para lectores de pantalla y con datos estructurados para los buscadores. En el móvil, muestra el nivel superior o una ruta abreviada en lugar de una línea larga que salte de renglón.

¿Qué son las migas de pan?

Las migas de pan son una ayuda de navegación secundaria. No sustituyen al menú principal; lo complementan respondiendo a dos preguntas de quien llega a una página: dónde estoy y cómo llego a la sección más amplia. El nombre viene del rastro de migas del cuento, aunque, a diferencia de ese rastro, unas buenas migas de pan muestran la estructura de la web y no el camino que el visitante siguió por casualidad.

Una ruta de migas de pan típica está encima del título de la página, usa texto pequeño, separa los niveles con un símbolo como > o / y termina en la página actual, que no es un enlace.

¿Qué tipos de migas de pan existen?

La tabla compara los tres tipos habituales.

Tipo	Qué muestran	Ejemplo	Ideal para	A vigilar
De ubicación	Dónde está la página en la estructura de la web	Inicio > Servicios > Branding	La mayoría de las webs, webs de servicios, bases de conocimiento	Páginas que están en varias secciones
De atributos	Los atributos o filtros que definen la página	Inicio > Zapatillas > Mujer > Talla 38	Tiendas con filtros y navegación por facetas	Rutas largas y direcciones duplicadas
De historial	Las páginas que el visitante acaba de ver	Volver a los resultados	Resultados de búsqueda y listas filtradas	Duplicar el botón Atrás del navegador

La mayoría de las webs deberían usar migas de pan de ubicación. Las de atributos ayudan en las tiendas, siempre que las combinaciones de filtros no creen direcciones infinitas que rastrear. Los enlaces de historial, como «Volver a los resultados», son útiles en una ficha de producto a la que se llega desde una búsqueda, pero son otra herramienta distinta de las migas de pan.

¿Cuándo necesita una web migas de pan?

Las migas de pan se ganan su sitio cuando la estructura es lo bastante profunda como para que un visitante se desoriente.

• Tiendas online con categorías y subcategorías, en las que la gente suele llegar a una ficha de producto desde el buscador.
• Webs de servicios con muchos servicios agrupados por áreas.
• Bases de conocimiento, documentación y centros de ayuda con temas anidados.
• Blogs y revistas organizados por categorías, donde las migas de pan unen un artículo con su sección.
• Webs corporativas o públicas grandes con varios niveles de páginas.

Aportan poco en webs pequeñas y planas de pocas páginas, en webs de una sola página y en landing pages pensadas para una única acción, donde una ruta de enlaces puede distraer del objetivo. Para ver cómo encaja la navegación en el proceso de diseño, consulta nuestra guía de diseño UX/UI.

¿Cómo diseñar las migas de pan?

Unas buenas migas de pan se encuentran fácilmente cuando se necesitan y se ignoran fácilmente cuando no.

• Colócalas arriba, encima del título de la página y debajo de la navegación principal, en el mismo sitio en todas las páginas.
• Que sean pequeñas y discretas, de menor tamaño que el texto, para que no compitan con el título.
• Haz que cada nivel sea un enlace salvo el último. La página actual se muestra como texto, para que el visitante entienda dónde está.
• Usa separadores claros, como >, / o un pequeño chevron, con espacio suficiente alrededor.
• Usa los nombres reales de las páginas, abreviados si hace falta, para que la ruta coincida con el menú y los títulos.
• Empieza por Inicio, o por la sección principal si el logo ya lleva al inicio y falta espacio.
• Una sola ruta por página. Si un producto está en varias categorías, elige una principal para la ruta.

Prueba la ruta con personas que no conozcan la web. Pídeles que encuentren un producto o un artículo y que después lleguen a la sección a la que pertenece, y observa si usan las migas de pan, el menú o el botón Atrás. Si nadie se fija en la ruta, quizá sea demasiado discreta; si se malinterpretan los niveles, lo que hay que revisar son los nombres de las páginas o la estructura, no las migas de pan.

¿Cómo funcionan las migas de pan en el móvil?

Las rutas largas se parten mal en pantallas pequeñas y empujan el título hacia abajo. Soluciones habituales:

• Mostrar solo el nivel superior, como un único enlace «volver a la sección» con una flecha.
• Recortar la parte central de las rutas largas, manteniendo el primer y el último nivel.
• Dejar que la ruta se desplace en horizontal en una sola línea, si debe mostrarse completa.

Elijas lo que elijas, mantén zonas táctiles lo bastante grandes para pulsarlas con comodidad y prueba en móviles reales.

¿Cómo deben usar las migas de pan las tiendas online?

Las tiendas son donde más importan las migas de pan, porque la ficha de producto suele ser la primera página que se ve. Quien llega a un solo par de zapatillas de running desde una búsqueda necesita ver rápido el resto de la gama, y una ruta como Inicio > Zapatillas > Zapatillas de running lo permite con un toque.

• Elige una categoría principal para cada producto, para que la ruta sea la misma dondequiera que aparezca.
• Deja los filtros fuera de la ruta salvo que la página filtrada sea una categoría real e indexable con contenido propio.
• Acompaña la ruta con un enlace «volver a los resultados» cuando se llega desde una búsqueda o una lista filtrada, para volver exactamente al punto anterior.

Nuestra guía de funcionalidades de una tienda online repasa los demás elementos de navegación que una tienda necesita desde el primer día.

¿Cómo se hacen accesibles las migas de pan?

Las migas de pan deben poder usarse igual con un lector de pantalla o con el teclado que con el ratón. El patrón de migas de pan del W3C describe el marcado habitual:

• Una zona de navegación (un elemento nav) con una etiqueta como «Migas de pan», para que los usuarios de lectores de pantalla la encuentren y puedan saltarla.
• Una lista ordenada de enlaces, que transmite el orden de los niveles.
• La página actual marcada con el atributo aria-current con el valor page, para que se anuncie como la ubicación actual.
• Separadores dibujados con CSS en lugar de escritos como caracteres, para que no se lean en cada nivel.
• Contraste suficiente y foco visible en el texto pequeño y los enlaces.

Nuestra guía de accesibilidad web repasa los requisitos más amplios que se aplican en Europa.

¿Las migas de pan ayudan al SEO?

Las migas de pan ayudan a los buscadores de dos formas. Sus enlaces son enlaces internos que indican a los rastreadores cómo se relacionan las páginas con sus secciones. Y los datos estructurados que describen la ruta, con el tipo BreadcrumbList, permiten a los buscadores entender la jerarquía y, en algunos resultados, mostrar la ruta en lugar de una simple dirección; Google explica el formato en su documentación sobre datos estructurados de migas de pan.

Para que funcione, la ruta debe reflejar una estructura clara y coincidir con las direcciones. Nuestro artículo sobre URL amigables para SEO explica cómo se refuerzan direcciones y estructura. En webs multilingües, cada idioma debe tener sus propios nombres y direcciones en la ruta.

¿Cuáles son los errores más comunes en las migas de pan?

• Usar las migas de pan como navegación principal. Complementan el menú; no lo sustituyen.
• Mostrar el historial en lugar de la ubicación. Repite el botón Atrás y confunde a quien llega desde el buscador.
• Enlazar la página actual. Un enlace a la página en la que ya estás es un callejón sin salida.
• Rutas que no coinciden con el menú. Nombres distintos para la misma sección en el menú y en las migas de pan.
• Migas de pan en webs planas. Una ruta Inicio > Página no aporta nada.
• Demasiado pequeñas o con poco contraste. Migas de pan difíciles de leer o de pulsar en el móvil.
• Sin datos estructurados, o con datos que no coinciden con la ruta visible.

Si estás revisando una web existente, nuestra checklist de auditoría UX incluye revisiones de navegación además de las migas de pan.

Preguntas frecuentes

Las migas de pan son un detalle pequeño que compensa en cualquier web con profundidad: orientan a los visitantes, ayudan a la accesibilidad y facilitan que los buscadores lean tu estructura. Descubre cómo nuestro servicio de diseño UX/UI diseña la navegación, o cuéntanos tu proyecto y revisaremos cómo se orienta la gente en tu web.