02/Estructura

Navbar

Barra fija con logo, menú con submenús (hover y clic), búsqueda, cambio de tema y llamada a la acción.

Completa

Los submenús usan el mismo componente que el dropdown. Con data-cb-dropdown-hover también se abren al pasar el mouse en dispositivos que lo permiten.

Acme

Empezar ↗

HTML

<header class="cb-nav static">
  <div class="cb-nav__inner">
    <a href="#" class="cb-logo"><span class="cb-logo__mark" aria-hidden="true">A</span>Acme</a>
    <nav aria-label="Principal">
      <ul class="cb-nav__menu">
        <li class="cb-nav__item"><a class="cb-nav__link" href="#" aria-current="page">Inicio</a></li>
        <li class="cb-nav__item cb-dropdown" data-cb-dropdown data-cb-dropdown-hover>
          <button class="cb-nav__link" type="button" data-cb-dropdown-trigger>Productos <svg class="cb-nav__chevron" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M2 3.5 5 6.5 8 3.5"/></svg></button>
          <div class="cb-dropdown__panel cb-dropdown__panel--wide">
            <a class="cb-dropdown__item cb-dropdown__item--rich" href="#"><span class="cb-dropdown__num">01</span><span><strong class="cb-dropdown__title">Facturación</strong><span class="cb-dropdown__desc">Emite y controla tus documentos.</span></span></a>
            <a class="cb-dropdown__item cb-dropdown__item--rich" href="#"><span class="cb-dropdown__num">02</span><span><strong class="cb-dropdown__title">Inventario</strong><span class="cb-dropdown__desc">Existencias en tiempo real.</span></span></a>
          </div>
        </li>
        <li class="cb-nav__item"><a class="cb-nav__link" href="#">Precios</a></li>
      </ul>
    </nav>
    <div class="cb-nav__actions">
      <button class="cb-search-btn" type="button" aria-label="Buscar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="cb-search-btn__text">Buscar</span><kbd data-cb-kbd-mod="K">⌘K</kbd></button>
      <button class="cb-icon-btn" type="button" data-cb-theme-toggle aria-label="Cambiar tema"><svg class="cb-theme-toggle__moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg><svg class="cb-theme-toggle__sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></button>
      <a href="#" class="cb-btn cb-btn--primary cb-nav__collapse-sm">Empezar ↗</a>
    </div>
  </div>
</header>

Clases y modificadores

Clase	Descripción
`.cb-nav`	Barra fija arriba con fondo translúcido y desenfoque.
`.cb-nav__inner`	Fila con el ancho máximo del contenedor y 64px de alto.
`.cb-logo`, `.cb-logo__mark`	Logo con marca cuadrada en color de acento.
`.cb-nav__menu`	Lista de enlaces. Se oculta por debajo de 960px.
`.cb-nav__item`, `.cb-nav__link`	Elemento y enlace o botón del menú. `aria-current="page"` lo marca activo.
`.cb-nav__chevron`	Flecha que gira cuando el submenú está abierto.
`.cb-nav__actions`	Grupo de acciones alineado a la derecha.
`.cb-nav__collapse`	Se oculta por debajo de 960px.
`.cb-nav__collapse-sm`	Se oculta por debajo de 600px.
`.cb-nav__burger`	Botón del menú móvil, visible solo por debajo de 960px.
`.cb-search-btn`	Botón de búsqueda con atajo de teclado.
`.cb-theme-toggle__sun`, `.cb-theme-toggle__moon`	Iconos que se alternan solos según el modo.

Atributos data-cb-*

Atributo	Descripción
`data-cb-dropdown`	Convierte el `li` en un submenú.
`data-cb-dropdown-hover`	Abre el submenú con hover en dispositivos con mouse.
`data-cb-theme-toggle`	Alterna entre claro y oscuro y lo guarda.
`data-cb-kbd-mod="K"`	Muestra ⌘K en Mac y Ctrl K en el resto.

JavaScript

Evento	Cuándo se dispara
`cb:open` / `cb:close`	En el `li` del submenú al abrir o cerrar.
`cb:theme`	En `document` al cambiar el modo. `detail.theme` y `detail.resolved`.

Accesibilidad

Los submenús son botones con aria-expanded y aria-controls; Esc los cierra y devuelve el foco.
Flecha abajo en el botón abre el submenú y enfoca el primer enlace.
El botón de tema necesita aria-label; los iconos van con aria-hidden.