# Dropdown (menús desplegables)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-dropdown.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Navegación

Presenta acciones o destinos secundarios bajo un control compacto usando elementos nativos.

v2.0

⌄
## 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.

i
## Enlaces o botones
Usa enlaces para navegación y botones para acciones. No conviertas todos los elementos en enlaces por comodidad.

Código + resultado

## Ejemplo aplicado de Dropdown
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

HTML

```html
<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>
```

Resultado aplicado   Dropdown · menú abierto

Componente real
Opciones  EditarDuplicar

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

01
### Nombre descriptivo
El activador debe anticipar qué opciones contiene.

02
### Acción correcta
Distingue navegación de acciones mediante elementos semánticos.

03
### No anidar
Evita dropdowns dentro de otros dropdowns.

04
### Espacio suficiente
Comprueba que el menú no quede cortado por overflow.