Nav-menu

# Nav Menu

El componente nav-menu define la navegación principal horizontal. Proporciona una lista de enlaces para navegar por las secciones de una aplicación o sitio web, con soporte para ítems simples y menús desplegables.

Cuándo usar

- Para la navegación principal o barra de menú horizontal de nivel superior (header). - Cuando las opciones disponibles representan secciones o páginas distintas.

Tipos de ítems soportados

1. Ítem simple: Un enlace directo (<a>) a otra página o sección. 2. Ítem con despliegue (submenú): Un botón (<button>) que actúa como _trigger_ para desplegar una lista secundaria de opciones de navegación coherentes con el contexto.

Relación y diferencia con dropdown-menu

- El dropdown-menu es un menú contextual de acciones (como "Editar", "Borrar", "Exportar") que puede ubicarse en cualquier parte de la interfaz. - El nav-menu es una estructura semántica dedicada puramente a navegación (enrutamiento). - Para mantener coherencia visual y evitar duplicación de código, el panel flotante de los submenús del nav-menu se construye componiendo las clases de la caja del dropdown-menu (dropdown-menu__panel, dropdown-menu__list, dropdown-menu__link) dentro de un ítem de navegación.

Accesibilidad (HTML/CSS)

- Todo el componente debe estar envuelto en una etiqueta <nav> con un aria-label descriptivo. - La estructura principal debe ser una lista semántica (<ul> y <li>). - El trigger del submenú debe utilizar un <button> nativo e informar su estado con aria-expanded="true" o aria-expanded="false". - Se debe enlazar el botón trigger con el panel desplegado mediante el atributo aria-controls apuntando al id del panel. - Los ítems activos deben indicarse visualmente (.nav-menu__link--active) y semánticamente (aria-current="page"). - Los estilos de foco están garantizados a través de la pseudoclase :focus-visible.

Comportamiento Interactivo (Requiere JavaScript)

La estructura y el diseño visual están cubiertos con HTML y CSS puros. Para que los submenús respondan adecuadamente a las acciones del usuario, es necesario implementar el siguiente comportamiento con JavaScript:

1. Apertura y Cierre:

- Al hacer clic en un .nav-menu__trigger, se debe alternar dinámicamente su atributo aria-expanded entre true y false. El motor de CSS se encarga automáticamente de ocultar o mostrar el panel correspondiente cuando esto sucede.

1. Cierre implícito:

- Detectar clics fuera del componente (eventos en el document o body) para cerrar cualquier submenú abierto. - Detectar la presión de la tecla Escape para cerrar el submenú activo y devolver el foco al botón trigger original.

1. Navegación avanzada por teclado (Recomendado):

- Aunque nativamente el tabulador pasará por los enlaces, un patrón de navegación completo (opcional) permitiría usar las flechas Izquierda y Derecha para moverse entre los ítems principales, y flechas Abajo o Enter para expandir los submenús.

<nav class="nav-menu" aria-label="Navegación principal">
  <ul class="nav-menu__list">
    <li class="nav-menu__item">
      <a href="#" class="nav-menu__link nav-menu__link--active" aria-current="page">Inicio</a>
    </li>
    <li class="nav-menu__item">
      <a href="#" class="nav-menu__link">Servicios</a>
    </li>
    <li class="nav-menu__item">
      <button type="button" class="nav-menu__trigger" aria-expanded="false" aria-controls="nav-submenu-default">
        Trámites
        <span class="nav-menu__icon">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
          </svg>
        </span>
      </button>
      <div class="nav-menu__panel dropdown-menu__panel" id="nav-submenu-default">
        <ul class="dropdown-menu__list">
          <li class="dropdown-menu__item">
            <a href="#" class="dropdown-menu__link">Documentación</a>
          </li>
          <li class="dropdown-menu__item">
            <a href="#" class="dropdown-menu__link">Certificados</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>