Dropdown Menu

# Dropdown Menu

¿Qué es?

El Dropdown menu es un componente interactivo que muestra una lista contextual de acciones o enlaces al interactuar con un botón disparador (trigger).

¿Cuándo usarlo?

- Para mostrar un conjunto de acciones secundarias agrupadas en un solo botón (ej: "Más opciones", "Exportar", "Compartir"). - Para mostrar un pequeño menú de navegación asociado a un elemento de la interfaz. - Para ofrecer opciones de filtrado simples que no requieran un formulario complejo.

¿Cuándo NO usarlo y en qué se diferencia de un Select?

- NO es un <select>: No debe usarse dentro de un formulario para que el usuario elija y envíe un valor como parte de los datos del form. - NO es un campo de texto (Combobox): No soporta escritura ni autocompletado nativo en esta versión básica. - El Dropdown Menu ejecuta acciones inmediatas (botones) o navega a otra URL (enlaces). El Select selecciona un dato.

Consideraciones de accesibilidad

- El trigger está implementado como un <button type="button">. - Utiliza el atributo aria-haspopup="menu" para indicar al lector de pantalla que despliega un menú. - El estado abierto/cerrado se comunica dinámicamente usando aria-expanded="true" o aria-expanded="false". - Los elementos del panel deben usar la etiqueta semántica correcta según su función: <button> para acciones (ej. "Eliminar") y <a> para navegación (ej. "Ver perfil"). - Incluye estilos claros para el estado focus-visible tanto en el trigger como en los ítems interactivos.

Variantes

- Tamaños del trigger: Default y Small (SM). - Estilos del trigger: Default (con borde) y Ghost (sin borde inicial). - Estados: Default, Hover, Active (abierto), Focus, Disabled. - Ítems: Pueden incluir iconos (izquierda/derecha) y tener estado "Seleccionado" (útil para dropdowns de filtrado).

<div class="dropdown-menu">
  <button type="button" class="dropdown-menu__trigger" aria-haspopup="menu" aria-expanded="false" id="dropdown-base">
    <span class="dropdown-menu__trigger-text">Opciones</span>
    <svg class="dropdown-menu__trigger-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
  <path d="M18 9.40039L12 15.4004L6 9.40039L7.0752 8.3252L12 13.25L16.9248 8.3252L18 9.40039Z" fill="currentColor"/>
</svg>
  </button>
  <div class="dropdown-menu__panel" aria-labelledby="dropdown-base" role="menu">
    <ul class="dropdown-menu__list" role="none">
      <li class="dropdown-menu__item" role="none">
        <button type="button" class="dropdown-menu__action" role="menuitem">Opción 1</button>
      </li>
      <li class="dropdown-menu__item" role="none">
        <button type="button" class="dropdown-menu__action" role="menuitem">Opción 2</button>
      </li>
    </ul>
  </div>
</div>