Lista desplegable de Bootstrap 5

Lista desplegable básica

El menú desplegable es un menú que se puede cambiar, permitiendo que el usuario seleccione un valor de una lista predefinida:

Ejemplo

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Botón desplegable
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Enlace 1</a></li>
    <li><a class="dropdown-item" href="#">Enlace 2</a></li>
    <li><a class="dropdown-item" href="#">Enlace 3</a></li>
  </ul>
</div>

Prueba personalmente

Ejemplo de explicación

.dropdown que indica el menú desplegable.

Para abrir el menú desplegable, utilice la clase .dropdown-toggle clase y data-toggle="dropdown" atributo a los botones o enlaces.

asignar .dropdown-menu clase a <div> elementos, que permiten construir realmente el menú desplegable. Luego, agregue .dropdown-item clase para agregar a cada elemento del menú desplegable (enlaces o botones).

línea divisora de la lista desplegable

.dropdown-divider clase para separar enlaces en el menú desplegable con una línea delgada horizontal:

Ejemplo

<li><hr class="dropdown-divider"></hr></li>

Prueba personalmente

título de la lista desplegable

.dropdown-header clase para agregar títulos en el menú desplegable:

Ejemplo

<li><h5 class="dropdown-header">Encabezado del desplegable 1</h5></li>

Prueba personalmente

elementos desactivados y activos

Utilice .active clase para resaltar un elemento específico de la lista desplegable (añadiendo un fondo de color azul).

Para desactivar un elemento específico en la lista desplegable, utilice .disabled clase (obtiene un color de texto claro y el icono "no-parking-sign" al pasar el ratón).

Ejemplo

<li><a class="dropdown-item" href="#">normal</a></li>
<li><a class="dropdown-item active" href="#">activo</a></li>
<li><a class="dropdown-item disabled" href="#">desactivado</a></li>

Prueba personalmente

ubicación de la lista desplegable

También puede cambiar la .dropend o .dropstart Agregar la clase a los elementos de desplazamiento para crear menús "dropend" o "dropstart". Tenga en cuenta que los íconos de flecha/flechas se agregan automáticamente:

Derecha

<div class="dropdown dropend">

Prueba personalmente

Izquierda

<div class="dropdown dropstart">

Prueba personalmente

alineación a la derecha de la lista desplegable

Para alinear a la derecha el menú desplegable, utilice .dropdown-menu-end agregar la clase .dropdown-menu elementos siguientes:

Ejemplo

<div class="dropdown-menu dropdown-menu-end">

Prueba personalmente

lista desplegable hacia arriba

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

Ejemplo

<div class="dropup">

Prueba personalmente

Texto desplegable

.dropdown-item-text La clase se utiliza para agregar texto puro a los elementos desplegables o para aplicar estilos de enlace predeterminados a los enlaces.

Ejemplo

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Enlace 1</a></li>
  <li><a class="dropdown-item" href="#">Enlace 2</a></li>
  <li><a class="dropdown-item" href="#">Enlace 3</a></li>
  <li><a class="dropdown-item-text" href="#">Enlace de texto</a></li>
  <li><span class="dropdown-item-text">Texto puro</span></li>
</ul>

Prueba personalmente

Botones combinados y lista desplegable

Ejemplo

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Teléfono</a></li>
      <li><a class="dropdown-item" href="#">Tableta</a></li>
    </ul>
  </div>
</div>

Prueba personalmente

Botones verticales combinados y lista desplegable

Ejemplo

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Teléfono</a></li>
      <li><a class="dropdown-item" href="#">Tableta</a></li>
    </ul>
  </div>
</div>

Prueba personalmente