# Breadcrumb

> Ruta jerárquica de navegación.

Categoría: Navegación · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Breadcrumb

```html
<div>
  <nav class="flex items-center gap-2 text-sm">
    <a href="#" class="text-ccs-slate hover:text-ccs-blue dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inicio</a>
    <svg class="w-3 h-3 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
    <a href="#" class="text-ccs-slate hover:text-ccs-blue dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Nuestra Institución</a>
    <svg class="w-3 h-3 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
    <a href="#" class="text-ccs-slate hover:text-ccs-blue dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Comités</a>
    <svg class="w-3 h-3 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
    <span class="text-ccs-ink font-medium dark:text-ccs-dark-text">Comité de Comercio Electrónico</span>
  </nav>
</div>
```