Cómo crear breadcrumbs dinámicos en Quarto

Implementación de navegación jerárquica en un sitio Quarto utilizando metadatos y componentes nativos.

Nota

Este artículo conserva una solución desarrollada para la arquitectura anterior. En la versión actual del sitio, la navegación se resuelve principalmente con la estructura nativa de Quarto y metadatos consistentes.

Si estás construyendo un sitio web o blog con Quarto, seguramente quieres que tus lectores sepan exactamente dónde están en tu estructura de contenido. Una herramienta esencial para lograrlo son las famosas migas de pan (breadcrumbs).

Las breadcrumbs mejoran la experiencia del usuario, permiten retroceder fácilmente y refuerzan la arquitectura de información de tu sitio.

En este artículo, te muestro cómo implementar breadcrumbs dinámicos en Quarto, aprovechando los metadatos del documento (YAML) sin necesidad de JavaScript ni shortcodes complejos. Todo usando el motor nativo de Quarto.

---

🧱 ¿Qué son las breadcrumbs?

Las breadcrumbs son una barra de navegación secundaria (como un sidebar) que muestra la ubicación jerárquica del contenido actual. Por ejemplo:

Inicio > Blog > Psicología > 2025 > Ello, yo y el superyó

Este patrón es común en blogs, documentación técnica y sitios académicos. Por defecto, Quarto permite la generación de breadcrumbs de forma automática utilizando el contenido definido en el archivo _quarto_yml dentro los parámetros de navegación en la barra lateral de una página web (website > sidebar > contents). El resultado son breadcrumbs aparecen encima del título de la página.

Sin embargo, es posible crear breadcrumbs y ubicarlos en cualquier sección de nuestra página de forma automática utilizando únicamente metadatos del documento. Así, es posible incluir breadcrumbs a todos los posts clasificados en diversas categorías dentro del mismo blog.

✅ Objetivo

Crear un breadcrumb automático como el siguiente:

Inicio > Blog > [Categoría] > [Título del Post]

Donde:

• [Categoría] viene del primer elemento de categories en el YAML.
  
• [Título del Post] viene del campo title.

Importante

En breadcrumbs, cada término está asociado a un respectivo enlace.

Además, se define una estructura de blog ordenado mediante subcarpetas para un aislamiento de contenido, escalabilidad y compatibilidad con Quarto. No obstante, la lógica funciona para cualquier otra estructura.

mi-pagina-web/
├── index.qmd
├── _includes/
│   └── breadcrumb.qmd
├── blog/
│   ├── index.qmd
│   ├── astrobiologia/
│   │   └── vida-en-marte/
│   │       └── vida-en-marte.qmd
│   ├── neurociencia/
│   │   └── cerebro-plastico/
│   │       └── cerebro-plastico.qmd
│   ├── fisica-cuantica/
│   │   ├── fisica-cuantica.qmd
│   │   └── entrelazamiento/
│   │       └── entrelazamiento.qmd
│   ├── biotecnologia/
│   │   └── edicion-genetica/
│   │       └── edicion-genetica.qmd

---

💡 Solución basada en metadata

Como ejemplo, se define el siguiente post sobre Entrelazamiento Cuántico con la siguiente YAML

---
title: "Entrelazamiento Cuántico"
description: "Explorando uno de los fenómenos más misteriosos de la física moderna."
date: 2025-06-03
categories: ["Física Cuántica"]
tags: ["fisica-cuantica", "cuántica", "entrelazamiento", "mecánica-cuántica"] # ← En minúsculas, para rutas
image: images/thumbnail-entrelazamiento.png
---

Paso 1: Define categories y tags apropiados para el post

De forma conveniente, el uso de categorías coincide con las carpetas principales dentro del blog (astrobiologia, neurociencia, fisica-cuantica y biotecnologia), por lo que su contenido se define respetando mayúsculas, minúsculas y espacios (apropiado para la visualización). Por otro lado, el uso de tags no solo se reserva para palabras claves relacionedos con el tema, sino tambien para el nombre de la carpeta de nuestro post en minúsculas (fisica-cuantica). Esto asegura que sea utilizado como parte su URL de forma correcta.

Advertencia

Usa tags para control técnico (URLs), y categories para lo visual.

Paso 2: Crea un archivo de breadcrumbs reutilizable

Crea esta ruta en tu proyecto:

_include/breadcrumb.qmd

Con el siguiente contenido:

<div class="breadcrumbs">
  [Inicio](../../../index.qmd) > 
  [Blog](../../index.qmd) > 
  [{{< meta categories.1 >}}](../{{< meta tags.1 >}}.qmd) > 
  <span>{{< meta title >}}</span>
</div>

Nota

No puedes usar {{< meta >}} dentro de atributos HTML como href. Intentarlo genera texto literal en lugar de valores reemplazados. No obstante, sí funciona aquí en código Quarto porque estamos incluyéndolo directamente con {{< include >}} y Quarto procesa los metadatos correctamente en texto plano como la definición de enlaces [Nombre de post](ruta/a/post).

Por ejemplo el siguiente código en html podría no funcionar directamente.

<div class="breadcrumbs">
  <a href="../../../index.qmd">Inicio</a> > 
  <a href="../../index.qmd">Blog</a> > 
  <a href="../{{< meta tags.1 >}}.qmd">{{< meta categories.1 >}}</a> > 
  <span>{{< meta title >}}</span>
</div>

Paso 3: Incluye el breadcrumb en tus posts

En cualquier post, simplemente agrega:

{{< include ../../_include/breadcrumb.qmd >}}

En este se caso se utiliza una ruta relativa y dependerá de la ubicación del post (entrelazamiento.qmd) dentro de la estructura.

---

✅ Resultado final

YAML

title: "Entrelazamiento Cuántico"
categories: ["Física Cuántica"]
tags: ["fisica-cuantica", "entrelazamiento", "mecánica-cuántica"]

Salida HTML

<div class="breadcrumbs">
  <a href="../../../post_principal.qmd">Inicio</a> > 
  <a href="../../blog/index.qmd">Blog</a> > 
  <a href="../fisica-quantica.qmd">Física Cuántica</a> > 
  <span>Entrelazamiento Cuántico</span>
</div>

Salida visual

Nota

La demostración anidada utilizada originalmente para este artículo no se migró: era contenido de prueba, no una colección real del blog. El patrón de código se conserva como referencia histórica.

---

🎨 Estilo opcional (CSS)

Agrega este CSS a tu styles.css para mejorar la apariencia:

.breadcrumbs {
  font-size: 0.9rem;
  color: #666;
  margin: 1.5rem 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.breadcrumbs a {
  color: #006AD4;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs span {
  color: #333;
  font-weight: 600;
}

✅ Ventajas de esta solución

Característica	Beneficio
📦 Reutilizable	Un solo archivo para todos los posts
🧩 Dinámico	Usa metadatos del post
🌐 Compatible	Funciona en GitHub Pages sin JS
🔧 Mantenible	Fácil de actualizar

---

🔄 Alternativas consideradas (y por qué no las usé)

Alternativa	Problema
JavaScript	Rompe SSR, no recomendado para SEO
Shortcode personalizado	Requiere más configuración y no siempre es portable

---

🏁 Conclusión

Crear breadcrumbs dinámicos en Quarto es posible y simple, si sabes cómo aprovechar los metadatos del documento. Mi solución combina:

• tags para controlar rutas (quarto.qmd)
• categories para mostrar nombres legibles (Quarto)
• {{< meta >}} dentro de enlaces Markdown

Esta técnica mejora significativamente la usabilidad de tu blog o sitio académico.

---

🔗 Recursos relacionados

• Quarto Documentation – Includes
• Quarto Documentation – Metadata
• La Tercera Fundación – Sobre mí

---

Sobre el autor

Soy Sergio, ingeniero en mecatrónica dedicado al diseño de robots clínicos, dispositivos biomédicos y sistemas de rehabilitación.

GitHub LinkedIn Más sobre mí