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>Layout adaptable
Bajo 1024px, todas las variantes de .cl-layout usan una columna: navegación arriba, contenido y riel de herramientas abajo. Sin JavaScript los enlaces permanecen visibles. Para plegar el menú, copiá la receta side-nav.js a tu app; usá un aria-controls único por navegación. El botón abre el menú y enfoca su primer enlace; Escape lo cierra y devuelve el foco. Al volver a escritorio la navegación se muestra automáticamente. No es un diálogo modal: Tab continúa hacia el contenido.
.cl-main--narrow centra formularios de una columna con un máximo de 480px (incluye padding), sin exceder el ancho disponible. No confundir con .cl-layout--narrow, que conserva una sidebar de 60px en escritorio.
<button class="cl-btn cl-side-toggle" data-cl-side-toggle
aria-controls="app-side" aria-expanded="true" hidden>Menú</button>
<div class="cl-layout cl-layout--with-rail">
<nav class="cl-side" id="app-side" aria-label="Principal">
<a class="cl-side-link" href="#contenido">Inicio</a>
<a class="cl-side-link" href="#contenido">Reportes</a>
</nav>
<main class="cl-main" id="contenido"><h1>Contenido</h1></main>
<aside class="cl-rail" aria-label="Herramientas">
<button class="cl-rail-btn" aria-label="Ayuda">?</button>
</aside>
</div>
<script src="/assets/side-nav.js" defer></script>