Brea­d­cru­mb trail o migas de pan: las ventajas de la ruta de na­ve­ga­ción

La na­ve­ga­ción brea­d­cru­mb (en español, “na­ve­ga­ción de migas de pan”) es un elemento fu­n­da­me­n­tal para la orie­n­ta­ción de los usuarios en páginas web y apli­ca­cio­nes. Ayuda a los vi­si­ta­n­tes a reconocer su posición actual dentro de la es­tru­c­tu­ra del sitio y a volver rá­pi­da­me­n­te a niveles su­pe­rio­res.

¿En qué consiste la na­ve­ga­ción de migas de pan?

¿Quién no recuerda el famoso cuento de los Hermanos Grimm “Hansel y Gretel”? Dos hermanos aba­n­do­na­dos en un bosque van dejando miguitas de pan por el camino para poder regresar a casa. Los niños caen en manos de una malvada bruja, pero logran escapar y salir vivos del bosque. Ahora bien ¿qué relación tiene este cuento de hadas tan macabro con el diseño web? Muy simple: incluso la Word Wide Web y, en pa­r­ti­cu­lar, las páginas web complejas pueden parecer un gigante y oscuro bosque para algunos usuarios. Al navegar en tiendas online complejas o en grandes portales web a algunos usuarios les viene bien contar con un par de migas de pan que les muestren el camino más fácil para regresar a las páginas an­te­rio­res.

La brea­d­cru­mb trail o ruta de na­ve­ga­ción con migas de pan es un elemento de na­ve­ga­ción se­cu­n­da­rio que se coloca en la parte superior de una página web y que sirve como apoyo al tra­di­cio­nal menú de na­ve­ga­ción. La razón de ser de estas “migas de pan” es ofrecer a los usuarios una mejor orie­n­ta­ción. Por un lado, la ruta de na­ve­ga­ción siempre indica al usuario en qué página de la web se encuentra y, por otro, suele mostrar la dirección hacia las pri­n­ci­pa­les ca­te­go­rías. La llamada brea­d­cru­mb trail posiciona las es­ta­cio­nes in­di­vi­dua­les en una sucesión lógica y, por lo general, je­rá­r­qui­ca. Así, los usuarios pueden moverse desde la página principal, a través de las ca­te­go­rías, hasta el contenido deseado. La ruta de na­ve­ga­ción ofrece enlaces a cada una de estas es­ta­cio­nes, pe­r­mi­tie­n­do que los usuarios entiendan la es­tru­c­tu­ra del sitio y puedan moverse en ella fá­ci­l­me­n­te.

Tipos de na­ve­ga­ción brea­d­cru­mb

La ruta de na­ve­ga­ción en una página web cumple la misma función que las migas de pan en el cuento de los Hermanos Grimm, con la crucial di­fe­re­n­cia de que estas no se las pueden comer los pájaros, lo que en el cuento complicó el regreso de los dos niños a casa. La re­pre­se­n­ta­ción de la brea­d­cru­mb trail varía de­pe­n­die­n­do de la web: las más comunes suelen emplear las flechas si­m­bo­li­za­das con un signo mayor que (>) que actúan como separador y, al mismo tiempo, re­pre­se­n­tan la jerarquía de la página. También es común en­co­n­trar­se con botones gráficos en forma de flecha. El resultado es, por lo general, una ruta de acceso con el siguiente esquema:

Página de inicio > categoría > posición actual

En webs más complejas es común en­co­n­trar­se con más ca­te­go­rías y su­b­ca­te­go­rías entre la página de inicio y la posición actual. Una ruta de na­ve­ga­ción según el esquema anterior también se conoce como location brea­d­cru­mb (migas de pan basadas en lo­ca­li­za­ción), en donde se presentan la posición y el camino a la página de inicio. Otra variante, no tan común, es la path brea­d­cru­mb (migas de pan de rutas de ex­plo­ra­ción), en donde en vez de co­n­ce­n­trar­se en la posición, toma como re­fe­re­n­cia la ruta de clics efe­c­tua­dos, algo que puede resultar confuso en páginas web complejas. En otras palabras, la path brea­d­cru­mb refleja la pauta de na­ve­ga­ción del usuario en la web, in­de­pe­n­die­n­te­me­n­te de si es errático o no. Esta variante podría tener el siguiente aspecto:

Página de inicio > Categoría 1 > Página de inicio > Categoría 3 > Categoría 2 > Página de inicio

El tercer tipo de migas de pan está basado en atributos o ca­te­go­rías: son las de­no­mi­na­das attribute brea­d­cru­m­bs. Estas se en­cue­n­tran con fre­cue­n­cia en el sector del comercio ele­c­tró­ni­co y, en especial, en las tiendas online. La ruta de na­ve­ga­ción por atributos le muestra al usuario la categoría a la que pertenece la página en la que se encuentra, así como sus atributos co­rre­s­po­n­die­n­tes. Estos se de­te­r­mi­nan en función de la in­fo­r­ma­ción pro­po­r­cio­na­da en los metadatos. Unos vaqueros, por ejemplo, pe­r­te­ne­cen a la categoría de pa­n­ta­lo­nes, pero también pueden llevar los atributos “azul” y “talla 32”.

Página de inicio > Ropa > Hombre > Pantalones > Vaqueros > Azul > Talla 32

La ruta de na­ve­ga­ción y la usa­bi­li­dad

Algunos podrían cue­s­tio­nar­se la pe­r­ti­ne­n­cia de la na­ve­ga­ción con migas de pan pues, después de todo, para ello se creó la barra de menú mediante la cual tiene lugar la na­ve­ga­ción. Además, los na­ve­ga­do­res más populares cuentan con botones para de­s­pla­zar­se hacia delante o hacia atrás. En efecto, estos elementos po­si­bi­li­tan la na­ve­ga­ción pero, en algunos casos, pueden resultar en­go­rro­sos y co­m­pli­ca­dos.

Una de las reglas más im­po­r­ta­n­tes para un buen diseño de ex­pe­rie­n­cia de usuario (UX) es que, cuantos menos clics sean ne­ce­sa­rios, mejor será la ex­pe­rie­n­cia del usuario en la web. Este principio se aplica es­pe­cia­l­me­n­te a la na­ve­ga­ción. No hay nada más molesto que tener que re­tro­ce­der haciendo clic co­n­s­ta­n­te­me­n­te en la flecha del navegador o que perderse en una categoría en la barra de menú tratando de encontrar algo. En la na­ve­ga­ción, las migas de pan le muestran al usuario dónde se encuentra exac­ta­me­n­te. La jerarquía y la es­tru­c­tu­ra de la web son mucho más tra­n­s­pa­re­n­tes con una ruta de na­ve­ga­ción que con un único menú de na­ve­ga­ción.

Incluso ac­ce­die­n­do a la página de destino a través de un enlace interno o externo y no iniciando su na­ve­ga­ción desde la página de inicio, los usuarios pueden saber en qué punto exacto se en­cue­n­tran con un vistazo rápido a la ruta de na­ve­ga­ción. Además, la facilidad de la na­ve­ga­ción tiene un efecto positivo en la tasa de rebote de una web: si los usuarios saben cómo deben moverse, es menos probable que abandonen la web enseguida, porque la categoría principal está solo a un clic de distancia y, gracias a la ruta de na­ve­ga­ción, no se tiene que realizar una nueva búsqueda. Este aspecto resulta relevante es­pe­cia­l­me­n­te para los usuarios que llegan a la web desde enlaces externos o desde motores de búsqueda.

La ruta de na­ve­ga­ción desde la pe­r­s­pe­c­ti­va SEO

Lo que es bueno para el usuario también es bueno para los motores de búsqueda. Este principio de marketing también se aplica a las migas de pan, que hoy ya se dejan ver oca­sio­na­l­me­n­te en los re­su­l­ta­dos de Google su­s­ti­tu­ye­n­do a un largo y complejo URL. Solo en di­s­po­si­ti­vos móviles, desde 2025 esto ya no es así, para mejorar la claridad en pantallas pequeñas. Los motores de búsqueda valoran las migas de pan cla­ra­me­n­te como una señal positiva: su vi­sua­li­za­ción muestra a los vi­si­ta­n­tes, incluso antes de acceder a la página, qué les espera y en qué categoría ate­rri­za­rán.

Close

Si ob­se­r­va­mos los nombres de cada una de las migas de pan, la segunda gran ventaja para la op­ti­mi­za­ción de motores de búsqueda se hace evidente: la ruta de na­ve­ga­ción re­pre­se­n­ta la opo­r­tu­ni­dad perfecta para asignar palabras clave re­le­va­n­tes a todos los enlaces internos naturales.

Un diseño web ló­gi­ca­me­n­te es­tru­c­tu­ra­do con migas de pan no solo hace más fácil co­m­pre­n­der la es­tru­c­tu­ra y re­le­va­n­cia de una web para los usuarios, sino también para los crawlers de los motores de búsqueda. Los ra­s­trea­do­res de los bu­s­ca­do­res siguen los enlaces internos e indexan las páginas en­co­n­tra­das. En un escenario ideal, esto se traduce en un mejor ranking. Para las visitas esto significa una mejor na­ve­ga­ción y una estancia más larga en la web, ambos factores re­le­va­n­tes para un buen po­si­cio­na­mie­n­to en los motores de búsqueda.

Qué hacer y qué no: im­ple­me­n­ta las migas de pan de manera adecuada

La ruta de na­ve­ga­ción puede mejorar la facilidad de uso de una web e incluso su ranking en los motores de búsqueda siempre y cuando se integre co­rre­c­ta­me­n­te, se coloque en un lugar pe­r­ti­ne­n­te y sea relevante para el proyecto web. A co­n­ti­nua­ción, ex­pli­ca­mos lo que debes y no debes hacer y te mostramos algunos ejemplos.

Las migas de pan deben ofrecer un valor añadido

Existen pocos casos en los que una na­ve­ga­ción de migas de pan cause realmente confusión: uno de ellos es cuando no cumple ninguna función útil. Las páginas web sin una es­tru­c­tu­ra profunda, con una o pocas páginas, no necesitan migas de pan. En estos casos, la na­ve­ga­ción se realiza a través de la barra de menú principal o el en­ca­be­za­do de la página. En cambio, la na­ve­ga­ción brea­d­cru­mb de Adidas es útil y aporta un valor claro.

Close

En la tienda online de Adidas, la na­ve­ga­ción de migas de pan es una adición útil: cuanto más complejas sean las búsquedas, más im­po­r­ta­n­te es para los usuarios poder re­s­ta­ble­cer la búsqueda de forma sencilla. Además, asegura que siempre se sepa en qué parte del sitio te en­cue­n­tras y qué filtros están activos en ese momento.

Las migas de pan tienen que ser lógicas y no confundir

Las páginas web que ofrecen muchas opciones de na­ve­ga­ción corren el riesgo de confundir a sus usuarios con de­ma­sia­das al­te­r­na­ti­vas. Las du­pli­ca­cio­nes son es­pe­cia­l­me­n­te críticas. Aunque las migas de pan suelen ser discretas y se integran bien en la mayoría de los diseños, si solo replican la función de la barra de na­ve­ga­ción principal, no sirven de nada. No siempre más es mejor. Un ejemplo positivo es el siguiente: en la página web de la Tienda de la Real Academia Española se ofrece valor añadido, y el rastro brea­d­cru­mb se integra de manera discreta y fácil de encontrar. La na­ve­ga­ción de migas de pan es ab­so­lu­ta­me­n­te lógica, fácil de seguir y además se adapta pe­r­fe­c­ta­me­n­te al diseño de la página.

Close

So­lu­cio­nes menos elegantes confunden al usuario con migas de pan sin un orden lógico. En el siguiente ejemplo se muestra una ruta de na­ve­ga­ción en la que no aparecen, por ejemplo, una página de inicio ni tampoco una categoría principal. Esta se compone solo por una in­di­ca­ción a la posición actual del usuario y no ofrece ningún elemento de orie­n­ta­ción ni tampoco de avance o retroceso en la na­ve­ga­ción. El enlace activo resulta igua­l­me­n­te inútil, ya que dirige a la página en la que ya se encuentra el usuario. Sin conocer el contexto, la vista de la posición no añade ningún valor e, incluso, logra confundir al usuario.

Close

La ruta de na­ve­ga­ción debe ser co­m­pa­ti­ble con la na­ve­ga­ción principal pero no re­em­pla­zar­la

Una brea­d­cru­mb trail solo debe im­ple­me­n­tar­se con el fin de apoyar y no suplantar la na­ve­ga­ción principal. En co­n­se­cue­n­cia, debe tener una apa­rie­n­cia más bien discreta dentro de la página web para no distraer la atención hacia el contenido real. Tampoco debería ocultar la barra de na­ve­ga­ción, ya que su fin principal es servir como re­fe­re­n­cia rápida y elemento de orie­n­ta­ción. Solo en casos ex­ce­p­cio­na­les, una brea­d­cru­mb muy extensa puede mejorar la usa­bi­li­dad, como ocurre, por ejemplo, en la página web de Decathlon.

Close

Las personas que están en contra del uso de brea­d­cru­m­bs ar­gu­me­n­ta­rían, en casos como este, que esta opción de na­ve­ga­ción es más bien una señal de un diseño web de­fi­cie­n­te y que refleja la falta de claridad de la página web. No obstante, si se observa con atención la captura de pantalla de Decathlon, pronto se percibe lo co­m­pli­ca­da que sería la na­ve­ga­ción sin brea­d­cru­m­bs: en este portal online hay artículos de numerosas ca­te­go­rías que los usuarios pueden explorar y descubrir. La es­tru­c­tu­ra de la página web se ramifica desde la página de inicio a través de distintas ca­te­go­rías, pro­fu­n­di­za­n­do bastante en cada una de ellas. La na­ve­ga­ción brea­d­cru­mb ayuda a no perderse entre tantas su­b­ca­te­go­rías. Además, acelera la selección y el salto de una categoría a otra.

¿Cómo se integra una brea­d­cru­mb trail?

Para crear brea­d­cru­m­bs, tienes a tu di­s­po­si­ción di­fe­re­n­tes opciones según tus ne­ce­si­da­des y el CMS que utilices. Una forma re­la­ti­va­me­n­te sencilla es crearlos con HTML. Po­s­te­rio­r­me­n­te, puedes pe­r­so­na­li­zar su apa­rie­n­cia con CSS. El siguiente ejemplo de código muestra cómo im­ple­me­n­tar brea­d­cru­m­bs con HTML:

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/index.html">Inicio</a></li>
        <li><a href="/nivel1.html">Nivel 1</a></li>
        <li aria-current="page">Subsección de Nivel 1</li>
    </ol>
</nav>

En el código anterior, y para lograr una na­ve­ga­ción lógica basada en la lo­ca­li­za­ción, solo falta un indicador de la posición actual. Para ello no se necesita un hi­pe­r­ví­ncu­lo adicional pues, ló­gi­ca­me­n­te, el usuario ya se encuentra en este punto. También se puede utilizar un elemento de lista para este fin.

El atributo aria-label forma parte de la es­pe­ci­fi­ca­ción ARIA (Ac­ce­s­si­ble Rich Internet Ap­pli­ca­tio­ns) y se utiliza para ofrecer a los lectores de pantalla una de­s­cri­p­ción adicional de un elemento, con el objetivo de mejorar la ac­ce­si­bi­li­dad.

Para que las brea­d­cru­m­bs sean más amigables para los motores de búsqueda, también se pueden utilizar op­cio­na­l­me­n­te mi­cro­da­tos, RDFa o JSON-LD. Si las brea­d­cru­m­bs se marcan de forma semántica en el código fuente, los ra­s­trea­do­res de los motores de búsqueda pueden leer estos elementos, lo que permite que se muestren como rich snippets en los re­su­l­ta­dos de búsqueda (SERP).

Además de la po­si­bi­li­dad de im­ple­me­n­tar­la a través de HTML o CSS, hay otras formas de integrar una brea­d­cru­mb trail. La forma más sencilla la ofrecen los sistemas de gestión de co­n­te­ni­dos que permiten im­ple­me­n­tar­la fá­ci­l­me­n­te en el backend y para aquellos CMS que no ofrecen ninguna solución es posible instalar los plugins co­rre­s­po­n­die­n­tes. Con PHP o Ja­va­S­cri­pt es posible añadir una ruta de na­ve­ga­ción para páginas web dinámicas.