Navmenu
Menú de navegación principal con soporte para ítems simples y submenús desplegables.
Estado: review
1. Menú funcional
Mostrar HTML
<nav class="gn-nav-menu" aria-label="Navegación principal" data-gn-menu-demo>
<ul class="gn-nav-menu__list">
<li class="gn-nav-menu__item"><a href="#" class="gn-nav-menu__link gn-nav-menu__link--active" aria-current="page">Centro</a></li>
<li class="gn-nav-menu__item"><a href="#" class="gn-nav-menu__link">Alumnado</a></li>
<li class="gn-nav-menu__item">
<button type="button" class="gn-nav-menu__trigger" data-gn-menu-trigger aria-expanded="false" aria-controls="nav-submenu-docs-1">
Aplicaciones
<svg class="gn-nav-menu__icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path d="M12 1.0752L6 7.0752L0 1.0752L1.0752 0L6 4.9248L10.9248 0L12 1.0752Z"/></svg>
</button>
<div class="gn-nav-menu__panel" id="nav-submenu-docs-1" hidden>
<ul class="gn-nav-menu__submenu-list">
<li class="gn-nav-menu__submenu-item"><a href="#" class="gn-nav-menu__submenu-link">Documentación</a></li>
<li class="gn-nav-menu__submenu-item"><a href="#" class="gn-nav-menu__submenu-link">Configuración del sitio</a></li>
<li class="gn-nav-menu__submenu-item"><a href="#" class="gn-nav-menu__submenu-link">Incidencias</a></li>
</ul>
</div>
</li>
<li class="gn-nav-menu__item"><a href="#" class="gn-nav-menu__link">Servicios</a></li>
</ul>
</nav>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initNavMenus();
});2. Estados visuales (hover, focus, active)
Mostrar HTML
<nav class="gn-nav-menu" aria-label="Estados visuales nav menu" data-gn-menu-demo>
<ul class="gn-nav-menu__list">
<li class="gn-nav-menu__item"><a href="#" class="gn-nav-menu__link gn-nav-menu__link--hover">Hover</a></li>
<li class="gn-nav-menu__item"><a href="#" class="gn-nav-menu__link gn-nav-menu__link--focus">Focus</a></li>
<li class="gn-nav-menu__item"><a href="#" class="gn-nav-menu__link gn-nav-menu__link--active" aria-current="page">Active</a></li>
<li class="gn-nav-menu__item"><a href="#" class="gn-nav-menu__link gn-nav-menu__link--disabled" aria-disabled="true" tabindex="-1">Disabled</a></li>
</ul>
</nav>Navmenu
nav-menu define la navegación principal horizontal con ítems simples y submenús desplegables.
Cuándo usar
- Navegación principal de cabecera.
- Acceso a secciones de primer nivel y subniveles relacionados.
Semántica
- Enlaces simples:
<a>. - Ítems que abren submenú:
<button>condata-gn-menu-trigger. - El botón usa
aria-expandedyaria-controls. - El panel de submenú se controla con
hidden.
Comportamiento interactivo
Implementado con nav-menu.js (sin frameworks):
- Click en trigger abre/cierra.
- Enter y Space abren/cierra.
- Escape cierra y devuelve foco al trigger.
- Click fuera cierra.
- Solo un submenú abierto a la vez por menú.
- Solo un ítem activo por menú (se sincroniza al hacer click).
Accesibilidad
<nav>conaria-label.- Icono de flecha con
aria-hidden="true". - Navegación por tabulador nativa (sin trampas de foco).
- Enlace activo con
aria-current="page"cuando aplica.
Nota para ejemplos de docs
En los examples con data-gn-menu-demo, los enlaces no navegan fuera de docs: se previene la navegación para poder probar la interacción del componente en la propia página.
Composición
nav-menu mantiene su propia anatomía de submenú (gn-nav-menu__panel, gn-nav-menu__submenu-list, gn-nav-menu__submenu-link) para evitar acoplamiento con elementos internos de otros bloques.