Menú de acciones (dropdown)
Un menú pequeño de acciones asociado a un botón. Sin JavaScript, el <details> nativo se abre y se cierra y los elementos son botones y enlaces corrientes. Con él, el menú sigue el patrón ARIA de botón de menú. Esto no es un menú de navegación: para eso usa enlaces, un desplegable o el panel lateral.
<details class="iv-dropdown" data-iv-component="dropdown" data-iv-placement="bottom-start">
<summary class="iv-button iv-button--secondary">Actions</summary>
<div class="iv-dropdown__menu">
<button class="iv-dropdown__item" type="button">Duplicate project</button>
<button class="iv-dropdown__item" type="button">Export as CSV</button>
<hr class="iv-dropdown__separator">
<a class="iv-dropdown__item" href="#dropdown-note">Read the retention policy</a>
</div>
</details>
<p id="dropdown-note">Exported files are kept for thirty days and then deleted from the storage bucket.</p>// data-iv-component="dropdown"
{
placement: "bottom-start",
}Opciones
| Opción | Atributo | Por defecto |
|---|---|---|
placement | data-iv-placement | bottom-start (bottom-end alinea con el borde final) |
closeOnSelect | data-iv-close-on-select | true |
Teclado
Enter, Espacio o flecha abajo sobre el botón abren el menú y ponen el foco en el primer elemento; las flechas arriba y abajo se mueven con vuelta al principio, Inicio y Fin saltan; Escape cierra y devuelve el foco; Tab cierra sin atrapar el foco.
Eventos
iv:open/iv:close (cancelables) e iv:opened/iv:closed; open(), close(), toggle(), isOpen.
Errores frecuentes
- Usar
role="menu"para una lista de enlaces de navegación. - Menús con más de unos siete elementos; mejor una página.
Índice de clases
Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.
| Clase | Qué hace |
|---|---|
iv-dropdown--end | Alinea el menú con el borde final del disparador. |