# Barra de navegación

> Menú principal y subnav.

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).

## Barra de navegación

```html
<div class="rounded-ccs border border-ccs-line bg-white overflow-hidden dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="h-16 px-6 flex items-center gap-8 border-b border-ccs-line dark:border-ccs-dark-line">
    <div class="ccs-mark text-lg"><span class="c1">CCS</span></div>
    <nav class="flex items-center gap-1 text-sm font-medium text-ccs-slate dark:text-ccs-dark-text-2">
      <a href="#" class="px-3 py-2 rounded-lg text-ccs-blue bg-ccs-blue/5 dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10 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>
      <a href="#" class="px-3 py-2 rounded-lg hover:text-ccs-blue hover:bg-ccs-bg dark:hover:bg-ccs-dark-overlay 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>
      <a href="#" class="px-3 py-2 rounded-lg hover:text-ccs-blue hover:bg-ccs-bg dark:hover:bg-ccs-dark-overlay 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">Sostenibilidad</a>
      <a href="#" class="px-3 py-2 rounded-lg hover:text-ccs-blue hover:bg-ccs-bg dark:hover:bg-ccs-dark-overlay 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">Comercio Electrónico</a>
      <a href="#" class="px-3 py-2 rounded-lg hover:text-ccs-blue hover:bg-ccs-bg dark:hover:bg-ccs-dark-overlay 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">Estudios</a>
    </nav>
    <div class="ml-auto flex items-center gap-2">
      <button aria-label="Buscar" class="h-9 w-9 rounded-lg hover:bg-ccs-bg grid place-items-center text-ccs-slate dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay 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 transition active:scale-95 motion-reduce:active:scale-100">
        <svg aria-hidden="true" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      </button>
      <button class="h-9 px-4 text-sm font-medium rounded-ccs text-white bg-ccs-blue hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue 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 transition active:scale-95 motion-reduce:active:scale-100">Mi cuenta</button>
    </div>
  </div>
  <!-- Subnav -->
  <div class="px-6 py-3 bg-ccs-bg flex items-center gap-6 text-sm text-ccs-slate dark:text-ccs-dark-text-2 dark:bg-ccs-dark-overlay">
    <a href="#" class="text-ccs-ink font-medium dark:text-ccs-dark-text 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">Quiénes somos</a>
    <a href="#" class="hover:text-ccs-blue 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">Directorio</a>
    <a href="#" class="hover:text-ccs-blue 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">Historia</a>
    <a href="#" class="hover:text-ccs-blue 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">Memorias</a>
    <a href="#" class="hover:text-ccs-blue 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">Equipo</a>
  </div>
</div>
```

## Guía: Menú móvil

En pantallas bajo 768 px la barra se reemplaza por un botón de menú que abre un cajón a pantalla completa. Es el mismo en todas las páginas, incluida la portada, y lo arma assets/js/mobile-nav.js con los datos de site-nav-data.js y catalog-nav-data.js.

- Las secciones con submenú (Docs y Componentes) son un botón dividido: el texto lleva a la página de la sección y la flecha, separada por una línea, abre el submenú.

- La flecha mide al menos 44 px de alto y 48 px de ancho.

- Dentro del submenú, "Volver al menú" regresa al primer nivel. Solo hay dos niveles.

- Al abrir el cajón en una página, se muestra directo el submenú de su sección, con el ítem actual marcado.

- El logo cambia a la versión blanca en modo oscuro.

Por qué: Si tocar el texto solo abriera el submenú, no se podría llegar a la página de la sección. La línea divisoria y el tamaño de la flecha ayudan a ver que son dos zonas distintas, algo que en pantallas táctiles no siempre se nota.