Menús desplegables de Bootstrap

Menú desplegable básico

Un menú desplegable es un menú alternable que permite al usuario elegir un valor de una lista predefinida:

Ejemplo explicado

La .dropdownclase indica un menú desplegable.

Para abrir el menú desplegable, use un botón o un enlace con una clase .dropdown-toggley el data-toggle="dropdown"atributo.

La .caretclase crea un icono de flecha de intercalación (), lo que indica que el botón es un menú desplegable.

Agregue la .dropdown-menuclase a un <ul>elemento para construir realmente el menú desplegable.

Divisor desplegable

La .dividerclase se usa para separar enlaces dentro del menú desplegable con un borde horizontal delgado:

Encabezado desplegable

La .dropdown-headerclase se usa para agregar encabezados dentro del menú desplegable:

Deshabilitar y elementos activos

Resalte un elemento desplegable específico con la clase .active (agrega un color de fondo azul).

Para deshabilitar un elemento en el menú desplegable, use la .disabledclase (obtiene un color de texto gris claro y un ícono de "señal de prohibido estacionar" al pasar el mouse):

Posición desplegable

Para alinear a la derecha el menú desplegable, agregue la .dropdown-menu-rightclase al elemento con .dropdown-menu:

Caer hasta

Si desea que el menú desplegable se expanda hacia arriba en lugar de hacia abajo, cambie el elemento <div> con class="dropdown" a "dropup":

Accesibilidad desplegable

Para ayudar a mejorar la accesibilidad para las personas que usan lectores de pantalla, debe incluir los siguientes atributos roleal aria-*crear un menú desplegable:

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Referencia desplegable completa de Bootstrap

Para obtener una referencia completa de todas las opciones, métodos y eventos desplegables, vaya a nuestra Referencia desplegable de Bootstrap JS .