Guia de Componentes de Bootstrap

...

Dropdowns o Listas Desplegables

Cambie las superposiciones contextuales para mostrar listas de enlaces y más con el complemento desplegable Bootstrap.

Visión general
Los menús desplegables son superposiciones contextuales que se pueden alternar para mostrar listas de enlaces y más. Se hacen interactivos con el complemento JavaScript desplegable Bootstrap incluido. Se alternan al hacer clic, no al desplazarse; esta es una decisión de diseño intencional .
Los menús desplegables se basan en una biblioteca de terceros, Popper , que proporciona posicionamiento dinámico y detección de ventanas gráficas. Asegúrese de incluir popper.min.js antes del JavaScript de Bootstrap o use bootstrap.bundle.min.js/ bootstrap.bundle.jsque contiene Popper. Popper no está acostumbrado a colocar menús desplegables en las barras de navegación, ya que no se requiere posicionamiento dinámico.
Si está construyendo nuestro JavaScript desde la fuente, requiereutil.js .

Accesibilidad
El estándar WAI ARIA define un role="menu"widget real , pero esto es específico para menús similares a aplicaciones que desencadenan acciones o funciones. Los menús de ARIA solo pueden contener elementos de menú, elementos de menú de casillas de verificación, elementos de menú de botones de opción, grupos de botones de opción y submenús.
Los menús desplegables de Bootstrap, por otro lado, están diseñados para ser genéricos y aplicables a una variedad de situaciones y estructuras de marcado. Por ejemplo, es posible crear menús desplegables que contengan entradas adicionales y controles de formulario, como campos de búsqueda o formularios de inicio de sesión. Por esta razón, Bootstrap no espera (ni agrega automáticamente) ninguno de los atributos roley aria-requeridos para los verdaderos menús ARIA . Los autores deberán incluir estos atributos más específicos ellos mismos.
Sin embargo, Bootstrap agrega soporte incorporado para la mayoría de las interacciones estándar del menú del teclado, como la capacidad de moverse a través de .dropdown-itemelementos individuales usando las teclas del cursor y cerrar el menú con la ESCtecla.

Ejemplos de
Envuelva la palanca del menú desplegable (su botón o enlace) y el menú desplegable dentro .dropdown, u otro elemento que declare position: relative;. Los menús desplegables se pueden activar desde ao buttonelementos para adaptarse mejor a sus necesidades potenciales.

Botón único
Cualquier sencillo .btnse puede convertir en un menú desplegable con algunos cambios de marcado. Así es como puede ponerlos a trabajar con cualquiera de los buttonelementos: div class="dropdown">