Componentes de Bootstrap

Desplegables

Un menú de acciones o enlaces que se abre desde un botón, para las opciones que no hace falta tener siempre a la vista.

Un desplegable esconde tras un botón una lista corta de acciones relacionadas. Úsalo para acciones secundarias de una fila o una página, y para elegir una entre pocas cosas relacionadas.

Cuándo usarlo

Úsalo

Mantener el menú corto (hasta unos 8 elementos) y agrupar con un encabezado o un divisor.
Un icono antes del texto cuando la acción tiene uno en la tabla de iconos.
Poner la acción destructiva la última, separada y en peligro.
Alinear el menú al final (dropdown-menu-end) cuando el botón está en el borde.

No

Esconder en un menú la acción principal de una página.
Anidar menús dentro de menús.
Usar un desplegable para una navegación que se usa todo el rato; usa pestañas o una barra de navegación.
Poner un formulario dentro de un menú.

Anatomía

Un disparador (un botón con dropdown-toggle, o un botón de icono) y un menú (dropdown-menu) con elementos (dropdown-item), encabezados (dropdown-header) y divisores opcionales. El menú se abre bajo el disparador.

Variantes y estados

Ábrelo

Elementos y estados

Combinaciones

Combinación	Para qué usarla
Botón × menú	Acciones secundarias de una página: un botón con etiqueta («Acciones») y una flecha.
Botón de icono × menú	Acciones de una fila: un botón cuadrado con icono (`btn-icon`) con `dropdown-menu-end`.
Botón dividido	La acción más probable en la parte principal (Guardar) y las demás en el menú.
Elementos × grupos	Agrupa con un encabezado y un divisor; el elemento destructivo va el último, separado, en peligro.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
El menú tiene aire, una sombra suave y elementos redondeados	Se lee como algo que flota sobre la página, y cada elemento es un objetivo que se acierta sin apuntar.
El elemento seleccionado va teñido y en seminegrita, no relleno	Una barra rellena parece un error o un botón; un tinte dice «este» con discreción.
El anillo de foco se dibuja dentro del elemento	Nunca tapa a su vecino, así que un elemento con foco y el seleccionado se distinguen.
El menú se abre con un fundido y un deslizamiento cortos	El ojo sigue de dónde vino; es lo bastante rápido para no esperarlo nunca.

Clases

Clase	Qué hace
`dropdown`	Envuelve el disparador y el menú
`dropdown-toggle`	El botón con la flecha
`dropdown-menu`	La lista que se abre
`dropdown-item`	Una acción; `active`, `disabled`
`dropdown-header`, `dropdown-divider`	Títulos de grupo y separadores
`dropdown-menu-enddropdown-menu-right`	Alinea el menú al final del disparador

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable. Los elementos se escriben dentro de una lista (ul/li).

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. Los elementos son a directamente dentro del menú.

Accesibilidad

El disparador lleva aria-expanded y, si es solo un icono, aria-label.
Las flechas mueven entre elementos, Escape cierra y devuelve el foco al disparador.
Los elementos son enlaces o botones, nunca texto plano.
Un elemento desactivado lleva aria-disabled="true" y tabindex="-1".