Componentes · Orientación
Breadcrumb (ruta jerárquica)
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.
<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>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
No reemplaza el título
La página mantiene su heading principal.
Ruta breve
Evita incluir niveles que no aportan orientación.
Actual sin enlace
Marca el último nivel con aria-current.