Bootstrap 4 menús desplegables
Menú desplegable básico
Un menú desplegable es un menú alternable que permite al usuario elegir un valor de una lista predefinida:
Ejemplo
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
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.
Agregue la .dropdown-menuclase a un <div>elemento para construir realmente el menú desplegable. Luego agregue la
.dropdown-itemclase a cada elemento (enlaces o botones) dentro del menú desplegable.
Divisor desplegable
La .dropdown-dividerclase se usa para separar enlaces dentro del menú desplegable con un borde horizontal delgado:
Ejemplo
<div class="dropdown-divider"></div>
Encabezado desplegable
La .dropdown-headerclase se usa para agregar encabezados dentro del menú desplegable:
Ejemplo
<div class="dropdown-header">Dropdown header 1</div>
Deshabilitar y elementos activos
Resalte un elemento desplegable específico con la .activeclase (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):
Ejemplo
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Posición desplegable
También puede crear un menú "desplegable a la derecha" o "desplegable a la izquierda", agregando la clase .droprighto .dropleftal elemento desplegable. Tenga en cuenta que el signo de intercalación/flecha se agrega automáticamente:
Gota a la derecha
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Menú desplegable a la derecha
Para alinear a la derecha el menú desplegable, agregue la .dropdown-menu-rightclase al elemento con .dropdown-menu:
Ejemplo
<div class="dropdown-menu dropdown-menu-right">
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":
Ejemplo
<div class="dropup">
Texto desplegable
La .dropdown-item-textclase se usa para agregar texto sin formato a un elemento desplegable, o se usa en enlaces para el estilo de enlace predeterminado.
Ejemplo
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Botones agrupados con un menú desplegable
Ejemplo
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Menús desplegables de botones divididos
Ejemplo
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Grupo de botones verticales con menú desplegable
Ejemplo
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Referencia desplegable completa de Bootstrap 4
Para obtener una referencia completa de todas las opciones, métodos y eventos desplegables, vaya a nuestra Referencia desplegable de Bootstrap 4 JS .