Componentes · Navegación
Dropdown (menús desplegables)
Presenta acciones o destinos secundarios bajo un control compacto usando elementos nativos.
Comportamiento nativo
Details y summary administran apertura sin JavaScript.
Accesible por teclado
El control participa en el orden de foco del documento.
Contenido flexible
El menú admite enlaces y botones según la acción.
Código + resultado
Ejemplo aplicado de Dropdown
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.
<details class="q-dropdown" open>
<summary class="btn btn-primary btn-fs-04">
Opciones
</summary>
<div class="q-dropdown__menu rounded-12 shadow-box-s">
<a class="q-dropdown__item rounded-8" href="#">
Editar
</a>
<a class="q-dropdown__item rounded-8" href="#">
Duplicar
</a>
<button class="q-dropdown__item rounded-8" type="button">
Archivar
</button>
</div>
</details>Opciones
Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
Referencia
Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.
| Clase o atributo | Función | Uso recomendado |
|---|---|---|
.q-dropdown | Raíz | Contenedor details del desplegable. |
summary | Activador | Control nativo de apertura y cierre. |
.q-dropdown__menu | Menú | Superficie flotante de opciones. |
.q-dropdown__item | Elemento | Enlace o botón del menú. |
.shadow-box-s | Sombra opcional | Eleva la superficie desplegable. |
.btn | Botón base | Da forma al activador. |
.btn-primary | Variante principal | Destaca el activador del menú. |
.btn-fs-04 | Escala | Ajusta el tamaño tipográfico del activador. |
[open] | Estado abierto | Expone el menú y gira su indicador. |
.bc-{token} | Color de acento | Personaliza el texto de las opciones activas o enfocadas. |
.rounded-12 | Radio del menú | Redondea el panel desplegable. |
.rounded-8 | Radio de opción | Redondea cada elemento interactivo. |
Recomendaciones
Buenas prácticas de Dropdown
Nombre descriptivo
El activador debe anticipar qué opciones contiene.
Acción correcta
Distingue navegación de acciones mediante elementos semánticos.
No anidar
Evita dropdowns dentro de otros dropdowns.
Espacio suficiente
Comprueba que el menú no quede cortado por overflow.