Core · Acciones y entrada
Desplegable
Un botón que abre debajo una lista breve de acciones o enlaces.
Ejemplo
Un botón llamado Acciones que abre una lista breve: editar, duplicar, mover y eliminar un proyecto.
Press Escape or click outside to close it.
Problemas conocidos
No hay teclas de flecha: Tab permite recorrer las acciones, como en cualquier lista de botones. En los navegadores sin posicionamiento CSS de anclaje, la lista se abre como una hoja en la parte inferior de la pantalla, no debajo del botón.
Código
Copiar el marcado
<div class="luz-dropdown">
<button class="luz-btn luz-btn--secondary" type="button" popovertarget="project-actions">Actions</button>
<div class="luz-dropdown__menu" id="project-actions" popover>
<ul class="luz-dropdown__list">
<li><a class="luz-dropdown__item" href="/project/edit/">Edit</a></li>
<li><button class="luz-dropdown__item" type="button">Duplicate</button></li>
<li><hr class="luz-dropdown__separator"></li>
<li><button class="luz-dropdown__item luz-dropdown__item--danger" type="button">Delete project</button></li>
</ul>
</div>
</div>Variantes y opciones
| Clase o atributo | Qué hace |
|---|---|
.luz-dropdown | El contenedor: el botón y su panel, uno junto al otro en el código fuente. Define el ámbito del anclaje, de modo que cada desplegable de la página se abre debajo de su propio botón |
popovertarget y popover | El botón identifica el panel mediante su id; el panel es el popover. El navegador se encarga del resto |
.luz-dropdown | El panel: una superficie con borde y sombra, de al menos 12 rem de ancho, que permite desplazarse si supera los 24 rem de alto |
.luz-dropdown | La lista <ul> de acciones |
.luz-dropdown | Un enlace o botón de al menos 44 px de alto y del ancho del panel |
.luz-dropdown | Una acción destructiva, en el color de peligro |
aria-disabled="true" | Una acción que no está disponible ahora: usa el color de texto desactivado y conserva su lugar en el orden de tabulación para que el lector pueda encontrarla |
.luz-dropdown | Una línea entre dos grupos de acciones: un <hr> en su propio <li> |
Cómo funciona
Un popover nativo que abre un botón con popovertarget y al que da estilo components/dropdown.css. No necesita JavaScript.
- El navegador coloca el panel en la capa superior, lo cierra con Escape o al hacer clic fuera, devuelve el foco al botón e indica a la tecnología de asistencia si está expandido.
- En los navegadores con posicionamiento CSS de anclaje (Chrome y Edge 125, Safari 26 y Firefox 147), el panel se abre debajo del botón, alineado con su borde inicial, y pasa a abrirse encima si no hay espacio. Si no está disponible, el panel aparece como una hoja en la parte inferior de la pantalla.
- En los navegadores sin la API de popover, la lista permanece en la página, debajo del botón, y todas las acciones siguen funcionando.
- Es una lista de acciones, no un
menude ARIA: ese role implica teclas de flecha, un tabindex itinerante y búsqueda por escritura, funciones que LUZ no implementa con scripts. Los enlaces y botones normales conservan todos los comportamientos que les proporciona el navegador.
Sin JavaScript
No cambia nada: el popover es HTML. Las acciones que son botones necesitan tus propios scripts para hacer algo, como cualquier botón; los enlaces funcionan tal cual.
Teclado y ARIA
Enter o Espacio en el botón abre el panel; el foco se mantiene en el botón y el panel aparece a continuación en el orden de tabulación. Tab permite llegar a la primera acción y recorrer las demás; Mayús+Tab permite volver.
Escape cierra el panel y devuelve el foco al botón.
- Pon al botón un nombre que indique qué contiene: «Acciones» o «Más opciones para Ana», no solo «…».
- Una acción no disponible usa
aria-disabled="true", nodisabled, para que siga siendo accesible y el lector de pantalla pueda anunciarla. No ejecutes la acción cuando se active. - El panel no es un diálogo ni contiene formularios: para una decisión o un formulario, usa un diálogo modal.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa un desplegable para mostrar entre tres y siete acciones relacionadas con un elemento cuando mostrarlas todas recargaría la página: por ejemplo, las acciones de una fila de tabla, una tarjeta o un proyecto.
Cuándo no usarlo
No uses un desplegable para elegir un valor ni para ocultar la acción principal.
- Para elegir un valor de un formulario, usa un select.
- Para la acción principal de una página, usa un botón visible.
- Para las secciones de un sitio, usa una barra lateral o una lista de navegación.
- LUZ no sustituye el menú contextual del botón derecho. El menú del navegador pertenece al lector y sustituirlo impide copiar, pegar y recibir ayuda ortográfica; ofrece las mismas acciones en un desplegable.
Qué hacer y qué no
Cómo escribir el contenido
Empieza cada acción con un verbo y ordénalas como las buscaría el lector.
- Dos o tres palabras: «Duplicar», «Mover al archivo».
- Indica qué elimina la acción destructiva: «Eliminar proyecto», no «Eliminar».
- Agrupa las acciones con un separador, no con encabezados.
Contraste y foco
Las acciones usan texto principal sobre la superficie del panel, que tiene un borde y una sombra.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Mínimo |
|---|---|---|---|---|---|
Acción | --luz-text-primary on --luz-surface | 16.5:1 | 14.0:1 | 21.0:1 | 4.5:1 |
Acción al pasar el puntero | --luz-text-primary on --luz-surface-hover | 14.4:1 | 12.6:1 | 20.1:1 | 4.5:1 |
Acción pulsada | --luz-text-primary on --luz-surface-pressed | 12.8:1 | 10.9:1 | 18.0:1 | 4.5:1 |
Acción peligrosa | --luz-color-danger on --luz-surface | 5.5:1 | 10.8:1 | 9.3:1 | 4.5:1 |
Acción desactivada | --luz-text-disabled on --luz-surface | 3.7:1 | 3.9:1 | 5.3:1 | 3:1 |
Borde del panel | --luz-outline on --luz-surface-page | 4.3:1 | 3.6:1 | 21.0:1 | 3:1 |
Anillo de foco | --luz-focus-ring on --luz-surface | 5.9:1 | 7.2:1 | 21.0:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes, iconos y el estado desactivado.
- Foco: cada acción tiene un contorno de 2 px
--luz-focus-ringdibujado dentro de su fila, para que el borde del panel no lo recorte. - No depende solo del color: la acción peligrosa indica qué elimina y la acción no disponible se anuncia como desactivada.
- Colores forzados: la acción bajo el puntero aparece subrayada y la no disponible usa
GrayText.
Tokens que usa
Los 19 tokens que lee components/dropdown.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Color
--luz-color-danger,--luz-divider,--luz-focus-ring,--luz-outline,--luz-surface,--luz-surface-hover,--luz-surface-pressed,--luz-text-disabled,--luz-text-primary- Spacing and sizing
--luz-control-lg,--luz-space-2xs,--luz-space-md,--luz-space-sm- Typography
--luz-font-sans,--luz-text-md- Radius
--luz-radius-md,--luz-radius-sm- Shadows
--luz-shadow-md- Motion
--luz-duration-fast
El teclado y ARIA están en la pestaña Código.