Patrones de dropdown y popover

La API de Popover de HTML (Chrome 114+, ampliamente compatible) proporciona un comportamiento declarativo de mostrar y ocultar: el atributo popover en el destino y popovertarget en el botón activador. No se necesita JavaScript para la apertura y el cierre básicos, incluido el light dismiss (clic fuera para cerrar) y la gestión de la tecla Escape.

Seleccione los elementos popover con [popover] o :popover-open. El pseudoelemento ::backdrop está disponible para oscurecer el fondo. Los popovers se muestran en la top layer, igual que los dialogs, por lo que no hay problemas de apilamiento con z-index.

CSS Anchor Positioning (Chrome 125+) coloca un popover en relación con su activador sin JavaScript: anchor-name: --btn en el activador, position-anchor: --btn en el popover y después top: anchor(bottom); left: anchor(left) para alinearlo debajo del activador.

Sin Anchor Positioning, use un contenedor padre con posicionamiento: position: relative en el contenedor y position: absolute; top: 100%; left: 0 en el dropdown. Funciona en todos los navegadores, pero requiere que el activador y el dropdown sean elementos hermanos dentro de un contenedor con posicionamiento.

Estilice la lista del dropdown como position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Los elementos del menú usan padding, un fondo para hover y un display de ancho completo.

Anime la apertura y el cierre de los popovers usando @starting-style para la entrada y transition-behavior: allow-discrete para animar el cambio de la propiedad display. Esto permite crear animaciones de entrada y salida solo con CSS vinculadas al estado abierto o cerrado del popover.

Los menús dropdown deben admitir el teclado: las teclas de flecha permiten desplazarse por los elementos del menú, Enter o Espacio activa el elemento enfocado y Escape cierra el menú y devuelve el foco al activador. La API de Popover gestiona Escape automáticamente; la navegación con las teclas de flecha requiere gestionar eventos con JavaScript.

Dropdown personalizado (sin usar la API de popover): añada aria-haspopup="listbox" y aria-expanded al activador, role="listbox" a la lista y role="option" y aria-selected a cada elemento. Los lectores de pantalla anuncian el estado expandido y el número de elementos.

Un dropdown colocado debajo de su activador puede desbordar la ventana gráfica por la parte inferior. Detecte esta situación con IntersectionObserver o getBoundingClientRect y cambie el dropdown a la parte superior del activador. CSS Anchor Positioning gestiona esto mediante position-try-fallbacks.

Los dropdowns anidados (submenús) añaden complejidad. Coloque los submenús a la derecha de sus elementos principales. Añada un retraso antes de ocultarlos al salir con el ratón (mediante transition-delay de CSS o un timeout de JS) para evitar que los submenús se cierren durante el movimiento diagonal del ratón.

Los dropdowns activados mediante hover fallan en dispositivos táctiles, ya que no existe un estado hover. Use activadores de clic o toque de forma universal. El cierre al tocar fuera funciona mediante el light dismiss de la API de popover o un listener de clic en document que cierre los dropdowns abiertos.

¿Qué proporciona automáticamente la API de Popover que antes requería JavaScript personalizado?

La API de Popover y CSS Anchor Positioning permiten crear juntos patrones declarativos de dropdowns y popovers con un uso mínimo de JavaScript. Para ofrecer una compatibilidad más amplia entre navegadores, los patrones basados en contenedores con posicionamiento funcionan de forma fiable. La accesibilidad del teclado, los atributos ARIA, la gestión de colisiones con la ventana gráfica y la compatibilidad con dispositivos táctiles completan componentes dropdown listos para producción.