Cómo Crear Breadcrumbs Dinámicos en Quarto

Aprende a implementar breadcrumbs dinámicos en tu blog o página web con Quarto. Mejora la experiencia del usuario, facilita la navegación jerárquica y refuerza la estructura de tu contenido, todo con una solución elegante.

Quarto
meta
navegación
shortcode
Autor/a

Sergio Jácobo

Fecha de publicación

13 de septiembre de 2025

Inicio > Blog > Quarto > Cómo Crear Breadcrumbs Dinámicos en Quarto

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:

Mostrar u ocultar el código 
<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.

Mostrar u ocultar el código 
<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

title: "Entrelazamiento Cuántico"
categories: ["Física Cuántica"]
tags: ["fisica-cuantica", "entrelazamiento", "mecánica-cuántica"]
<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>

Para ver el resultado final, ir a la demo del blog:

🎨 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

Volver arriba

Reutilización

Cómo citar

BibTeX
@online{jácobo2025,
  author = {Jácobo, Sergio},
  title = {Cómo Crear Breadcrumbs Dinámicos en Quarto},
  date = {2025-09-13},
  url = {https://sergiojacobo.com/blog/posts/2025/01/01.html},
  langid = {es}
}
Por favor, cita este trabajo como:
Jácobo, Sergio. 2025. “Cómo Crear Breadcrumbs Dinámicos en Quarto.” September 13, 2025. https://sergiojacobo.com/blog/posts/2025/01/01.html.