03/Estructura

Menú móvil

Menú a pantalla completa que entra desde la derecha debajo de la navbar. Se cierra al elegir un enlace, con Esc o al pasar a escritorio.

Botón y panel

El botón apunta al id del panel con data-cb-mobile-toggle. Achica la ventana por debajo de 960px para verlo funcionar.

HTML

<button class="cb-icon-btn" type="button" data-cb-mobile-toggle="demo-mobile" aria-label="Menú">
  <svg class="cb-burger__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
  <svg class="cb-burger__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
</button>
<nav class="cb-mobile-menu" id="demo-mobile" data-cb-mobile-menu aria-label="Menú móvil">
  <a class="cb-mobile-menu__link" href="#">Inicio <span class="cb-mobile-menu__meta">01</span></a>
  <a class="cb-mobile-menu__link" href="#">Servicios <span class="cb-mobile-menu__meta">02</span></a>
  <div class="cb-label cb-mobile-menu__label"><b>//</b>Productos</div>
  <a class="cb-mobile-menu__link" href="#">Facturación <span class="cb-mobile-menu__meta">↗</span></a>
  <a href="#" class="cb-btn cb-btn--primary cb-mobile-menu__cta">Empezar ↗</a>
</nav>

Clases y modificadores

Clase	Descripción
`.cb-mobile-menu`	Panel fijo bajo la navbar. `.is-open` lo muestra.
`.cb-mobile-menu__link`	Enlace grande con borde inferior.
`.cb-mobile-menu__meta`	Número o flecha a la derecha del enlace.
`.cb-mobile-menu__label`	Separador de sección (se combina con `.cb-label`).
`.cb-mobile-menu__cta`	Botón de ancho completo al final.
`.cb-burger__open`, `.cb-burger__close`	Iconos que se alternan según `aria-expanded`.

Atributos data-cb-*

Atributo	Descripción
`data-cb-mobile-menu`	Marca el panel. Necesita `id`.
`data-cb-mobile-toggle="id"`	Botón que abre y cierra el panel.

JavaScript

Evento	Cuándo se dispara
`cb:open` / `cb:close`	En el panel. `cb:open` se puede cancelar.

Accesibilidad

El botón recibe aria-expanded y aria-controls automáticamente.
Cerrado queda con visibility: hidden, así sus enlaces no reciben foco.
Esc cierra el menú y devuelve el foco al botón.