Menús y dropdowns.
Usar un menú para un conjunto corto de comandos; usar navegación normal para destinos y select para elegir un valor de formulario.
Cuándo usar
Usar un menú para un conjunto corto de comandos; usar navegación normal para destinos y select para elegir un valor de formulario.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Botón disparador |
| 2 | Popup asociado |
| 3 | Items con rol según patrón |
| 4 | Separadores y grupos opcionales |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| closed | Sólo disparador visible |
| open | Popup posicionado sin cubrir contexto crítico |
| focused | Un item activo por teclado |
| disabled item | Visible y no activable |
| empty | No abrir o explicar ausencia |
Accesibilidad
- Escape cierra y devuelve foco.
- Flechas recorren items en menu; Tab sigue el flujo documentado.
- El botón expone aria-expanded y aria-controls.
- No anidar menús en móvil.
HTML de referencia
<button aria-expanded="false" aria-controls="menu-exportar">Exportar</button>
<ul id="menu-exportar" hidden>
<li><a href="/exportar.csv">CSV</a></li>
<li><a href="/exportar.json">JSON</a></li>
</ul>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.