# Breadcrumb (ruta jerárquica)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-breadcrumb.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Orientación

Comunica la ubicación de la página dentro de una jerarquía y permite volver a niveles anteriores sin sustituir la navegación principal.

v2.0

/
## Jerarquía
Hace visible la relación entre niveles.

↩
## Retorno
Los niveles anteriores permanecen enlazados.

●
## Color adaptable
La utilidad bc-* personaliza enlaces y separadores.

Código + resultado

## Ruta de documentación
El último elemento representa la página actual y no necesita enlace.

HTML

```html
<nav class="q-breadcrumb bc-primary" aria-label="Migas de pan">\n  <ol>\n    <li><a href="#">Inicio</a></li>\n    <li><a href="#">Componentes</a></li>\n    <li aria-current="page">Breadcrumb</li>\n  </ol>\n</nav>
```

Resultado aplicado  Breadcrumb
Componente real

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

## Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

| Clase o atributo | Función | Uso recomendado |
| --- | --- | --- |
| .q-breadcrumb | Raíz del componente. | Aplicar al nav. |
| ol | Lista ordenada de niveles. | Mantiene el orden jerárquico. |
| aria-label | Nombre de la navegación. | Usar “Migas de pan” o equivalente. |
| aria-current="page" | Identifica la ubicación actual. | Aplicar al último li. |
| .bc-{color} | Color del componente. | Personalización opcional. |

Recomendaciones

## Buenas prácticas de Breadcrumb

01
### No reemplaza el título
La página mantiene su heading principal.

02
### Ruta breve
Evita incluir niveles que no aportan orientación.

03
### Actual sin enlace
Marca el último nivel con aria-current.