Un menú desplegable es un menú conmutable que permite al usuario elegir un valor de una lista predefinida.
Ejm
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 clase .dropdown indica que se trata de un menú desplegable.
Para abrir un menú desplegable utilizamos un botón o un link con la clase .drogdown-toggle y el atributo data-toggle=»dropdown».
Agrega la clase .dropdown-menu a un elemento <div> para construir realmente el menú desplegable. Luego agrega la clase .dropdown-item a cada elemento (enlaces o botones) dentro del menú desplegable.
Divisor desplegable
La clase .dropdown-divisor se usa para separar enlaces dentro del menú desplegable con un borde horizontal delgado.
Ejm
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-divider class is used to separate links inside the dropdown
menu with a thin horizontal line:</p>
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
Encabezado desplegable
La clase .dropdown-header se usa para agregar encabezados dentro del menú desplegable.
Ejm
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<h5 class="dropdown-header">Dropdown header</h5>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
Activar y deshabilitar items
Resalta 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 clase .disabled (obtiene un color de texto gris claro y un icono de «señal de no estacionarse» al pasar el mouse).
Ejm
<div class="container">
<h2>Dropdowns</h2>
<p>The .active class adds a blue background color to the active link.</p>
<p>The .disabled class disables a dropdown item
(grey text color and a no-parking-sign on hover).</p>
<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="#">Normal</a>
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
</div>
</div>
</div>
Posición desplegable
También puedes crear un menú «dropright» o «dropleft», agregando la clase .dropright o .dropleft al elemento desplegable. Ten en cuenta que el cursor / flecha se agrega automáticamente:
Ejm Dropright
<div class="dropdown dropright">
Ejm Dropleft
<div class="dropdown dropleft">
Menú desplegable a la derecha
Para alinear a la derecha el menú desplegable, agrega la clase .dropdown-menu-right al elemento con .dropdown-menu.
Ejm
<div class="dropdown-menu dropdown-menu-right">
Dropup (Menú desplegable hacia arriba)
Si deseas que el menú desplegable se expanda hacia arriba en lugar de hacia abajo, cambie el elemento <div> con class = «dropdown» a «dropup».
Ejm
<div class="dropup">
Texto desplegable
La clase .dropdown-item-text se usa para agregar texto sin formato a un elemento desplegable, o se usa en enlaces para el estilo de enlace predeterminado.
Ejm
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-item-text class is used to add plain text
to a dropdown, or used on links for default link styling.</p>
<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-text" href="#">Text Link</a>
<span class="dropdown-item-text">Just Text</span>
</div>
</div>
</div>
Botones agrupados con un menú desplegable
Ejm
<div class="container">
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create dropdown menus:</p>
<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>
</div>
Botones desplegables divididos
Ejm
<div class="container">
<h2>Dropdown Split Buttons</h2>
<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>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary 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>
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success 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>
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info 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>
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning 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>
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger 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>
</div>
Grupo de botones verticales con / desplegable
Ejm
<div class="container">
<h2>Vertical Button Group with Dropdown</h2>
<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>
</div>