Cómo generar breadcrumbs (migas de pan) dinámicos con Javascript

Actualizado : 2023-10-04

La navegación eficiente es esencial para cualquier sitio web. Cuando los usuarios visitan tu página, quieren saber dónde están y cómo pueden volver atrás o explorar otras secciones fácilmente.

Las migajas de pan (breadcrumbs) son una forma efectiva de lograrlo. En este artículo, exploraremos un código JavaScript que te permitirá generar migajas de pan de manera dinámica y mejorar la experiencia del usuario en tu sitio web.

¿Qué son los breadcrumbs o migas de pan?

Las migajas de pan son una serie de enlaces de navegación que indican la ruta que un usuario ha seguido para llegar a una página web específica.

Por lo general, se muestran en la parte superior de la página y permiten a los usuarios regresar a páginas anteriores con facilidad.

Imagina que tienes un sitio web con varias categorías y subcategorías. Cuando un usuario navega profundamente en tu sitio y luego decide volver a la página de inicio o a una categoría superior, las migajas de pan le proporcionan un camino claro para hacerlo.

Esto no solo mejora la experiencia del usuario, sino que también facilita la navegación y la comprensión de la estructura de tu sitio. El cuál es un factor que puede ayudarte a mejorar el posicionamiento (SEO) de tu web.

Código para generar Breadcrumbs dinámicos a partir de una URL con javascript

const generateBreadCrumbs = (pathname) => {
  const pathNames = pathname.split("/").filter((path) => path);
  const arrBreadCrumbs = pathNames.map((item, i) => {
    const href = `/${pathNames.slice(0, i + 1).join("/")}`;
    const anchor = `${item.replaceAll("-", " ")}`;
    return {
      href,
      anchor,
    };
  });

  arrBreadCrumbs.unshift({ href: "/", anchor: "Inicio" });

  return arrBreadCrumbs;
};

/*
console.log(generateBreadCrumbs('/nike/zapatos/deportivos/rojos'))
[
  { href: '/', anchor: 'Inicio' },
  { href: '/nike', anchor: 'nike' },
  { href: '/nike/zapatos', anchor: 'zapatos' },
  { href: '/nike/zapatos/deportivos', anchor: 'deportivos' },
  { href: '/nike/zapatos/deportivos/rojos', anchor: 'rojos' }
]

*/

Este código es una función llamada generateBreadCrumbs que toma una cadena de pathname como entrada y devuelve un conjunto de migajas de pan en forma de un arreglo de objetos. Ahora, desglosemos cómo funciona este código.

División de la Ruta: La función comienza dividiendo la ruta pathname en fragmentos usando split("/"). Luego, se filtran los fragmentos vacíos para asegurarse de que no haya elementos no deseados en la ruta.
Generación de Enlaces y Anclas: Luego, se itera a través de los fragmentos de la ruta y se generan tanto el enlace (href) como el texto del ancla (anchor) para cada fragmento. Los fragmentos se unen para crear la URL del enlace, y los guiones son reemplazados por espacios en blanco en el texto del ancla para que sea más legible.
Añadir Página de Inicio: Finalmente, se agrega una migaja de pan adicional al principio del arreglo, que generalmente representa la página de inicio del sitio web.

Implementación en tu Sitio Web

Ahora que tienes el código de generación de migajas de pan, es el momento de implementarlo en tu sitio web. Aquí hay una guía paso a paso sobre cómo hacerlo:

Paso 1: Importa la Función

Asegúrate de importar la función generateBreadCrumbs en el archivo donde deseas mostrar las migajas de pan.

import { generateBreadCrumbs } from './breadcrumbs.js';

Paso 2: Obtén la Ruta Actual

Antes de utilizar la función, debes obtener la ruta actual de la página. Puedes hacerlo utilizando window.location.pathname o cualquier método equivalente en tu entorno de desarrollo.

Paso 3: Genera las Migajas de Pan

Llama a la función generateBreadCrumbs con la ruta actual como argumento para generar las migajas de pan. Esto te dará un arreglo de objetos que representan cada fragmento de la ruta.

const currentPath = window.location.pathname;
const breadcrumbs = generateBreadCrumbs(currentPath);

Capturar urls en frameworks javascript

Todos los frameworks de javascript populares como next.js, remix, astro, gatsby o qwik tienen sus propios métodos para obtener la ruta actual.

Paso 4: Muestra las Migajas de Pan

Finalmente, muestra las migajas de pan en tu página web, preferiblemente en la parte superior. Puedes usar HTML y CSS para darles estilo de acuerdo con el diseño de tu sitio.

Beneficios de las Migajas de Pan

Ahora que has implementado con éxito las migajas de pan en tu sitio web, es importante comprender los beneficios que aportan:

Navegación Intuitiva: Los usuarios pueden navegar por tu sitio de manera más intuitiva y comprender su estructura.
Mejora la Experiencia del Usuario: Las migajas de pan facilitan el regreso a páginas anteriores, lo que mejora la experiencia del usuario.
Mejor SEO: Los motores de búsqueda valoran la navegación clara, lo que puede mejorar tu posición en los resultados de búsqueda.
Reducción de la Tasa de Rebote: Al ofrecer una navegación más sencilla, es más probable que los usuarios permanezcan en tu sitio por más tiempo.

Si has implementado con éxito las migajas de pan en tu sitio web o tienes algún consejo adicional, ¡compártelo en la sección de comentarios! Juntos, podemos seguir mejorando la experiencia de navegación en la web.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi