Side nav

Navegación lateral: .cl-side contiene una o más .cl-side-section, cada una con una .cl-side-label y enlaces .cl-side-link (estado activo .is-active). Va dentro de la primera columna de .cl-layout.

Grupo simple

Sección con etiqueta y enlaces; el ícono precede al texto.

<nav class="cl-side">
  <div class="cl-side-section">
    <div class="cl-side-label">Visión general</div>
    <a class="cl-side-link is-active" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11.5L12 4l9 7.5"/><path d="M5 10v9h14v-9"/></svg>Dashboard</a>
    <a class="cl-side-link" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3.5 19c.6-3 2.9-4.5 5.5-4.5s4.9 1.5 5.5 4.5"/><circle cx="17" cy="9" r="2.4"/><path d="M16 14.6c2.6.2 4.4 1.7 4.9 4.4"/></svg>Listado</a>
    <a class="cl-side-link" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V4"/><path d="M4 20h16"/><path d="M8 16v-5M12 16V8M16 16v-9"/></svg>Reportes</a>
  </div>
  <div class="cl-side-section">
    <div class="cl-side-label">Configuración</div>
    <a class="cl-side-link" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2.8"/><path d="M19.4 13.5l1.6.9-1.6 2.8-1.8-.4a7 7 0 0 1-1.7 1l-.3 1.8h-3.2l-.3-1.8a7 7 0 0 1-1.7-1l-1.8.4-1.6-2.8 1.6-.9a7 7 0 0 1 0-2l-1.6-.9 1.6-2.8 1.8.4a7 7 0 0 1 1.7-1l.3-1.8h3.2l.3 1.8c.6.2 1.2.5 1.7 1l1.8-.4 1.6 2.8-1.6.9a7 7 0 0 1 0 2z"/></svg>Ajustes</a>
  </div>
</nav>

Con subenlaces

.cl-side-sub indenta un enlace hijo bajo su padre.

<nav class="cl-side">
  <div class="cl-side-section">
    <div class="cl-side-label">Pantallas</div>
    <a class="cl-side-link is-active" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></svg>Listado</a>
    <a class="cl-side-link cl-side-sub" href="#">Activos</a>
    <a class="cl-side-link cl-side-sub" href="#">Inactivos</a>
  </div>
</nav>

Grupos plegables (sin JS)

Regla de las apps: nada de JavaScript para plegar grupos de navegación. Usá <details>/<summary> nativos — .cl-side-section pasa al <details> y .cl-side-label al <summary>.

<nav class="cl-side">
  <details class="cl-side-section" open>
    <summary class="cl-side-label">Visión general</summary>
    <a class="cl-side-link is-active" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11.5L12 4l9 7.5"/><path d="M5 10v9h14v-9"/></svg>Dashboard</a>
    <a class="cl-side-link" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3.5 19c.6-3 2.9-4.5 5.5-4.5s4.9 1.5 5.5 4.5"/><circle cx="17" cy="9" r="2.4"/><path d="M16 14.6c2.6.2 4.4 1.7 4.9 4.4"/></svg>Listado</a>
  </details>
  <details class="cl-side-section">
    <summary class="cl-side-label">Configuración</summary>
    <a class="cl-side-link" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2.8"/><path d="M19.4 13.5l1.6.9-1.6 2.8-1.8-.4a7 7 0 0 1-1.7 1l-.3 1.8h-3.2l-.3-1.8a7 7 0 0 1-1.7-1l-1.8.4-1.6-2.8 1.6-.9a7 7 0 0 1 0-2l-1.6-.9 1.6-2.8 1.8.4a7 7 0 0 1 1.7-1l.3-1.8h3.2l.3 1.8c.6.2 1.2.5 1.7 1l1.8-.4 1.6 2.8-1.6.9a7 7 0 0 1 0 2z"/></svg>Ajustes</a>
  </details>
</nav>