Menú desplegable

Propuesto2026-10-02 · Propuesto por el kit; falta la revisión del founder.

Acciones secundarias de un registro o una lista.

Vista · datos de ejemplo

Anatomía

Botón con aria-haspopup
Menú flotante blanco con sombra suave
Título opcional en etiqueta de sistema
Separador y acción peligrosa en naranja al final

Sí

Escape y clic afuera lo cierran

No anides menús

HTML exacto

<span class="nu-desplegable">
  <button type="button" class="nu-boton" aria-haspopup="menu" aria-expanded="true" aria-controls="menu-ejemplo"><span class="nu-icono nu-icono--chico" data-icono="more_options"></span>Acciones</button>
  <span role="menu" class="nu-desplegable__menu" id="menu-ejemplo">
    <span class="nu-etiqueta nu-desplegable__titulo">Juanito SpA</span>
    <button type="button" role="menuitem" class="nu-desplegable__opcion"><span class="nu-icono nu-icono--chico" data-icono="nuevauno_packing_lists"></span>Nueva guía</button>
    <button type="button" role="menuitem" class="nu-desplegable__opcion"><span class="nu-icono nu-icono--chico" data-icono="account"></span>Nueva factura</button>
    <button type="button" role="menuitem" class="nu-desplegable__opcion"><span class="nu-icono nu-icono--chico" data-icono="mail"></span>Enviar correo</button>
    <span class="nu-desplegable__separador"></span>
    <button type="button" role="menuitem" class="nu-desplegable__opcion nu-desplegable__opcion--peligro"><span class="nu-icono nu-icono--chico" data-icono="archive"></span>Archivar</button>
  </span>
</span>

Clases: .nu-desplegable .nu-desplegable__menu .nu-desplegable__opcion .nu-desplegable__separador · Fragmento: snippets/dropdown.html