Dropdowns

Alterna superposiciones contextuales para mostrar listas de enlaces y más con el plugin dropdown de Bootstrap.

En esta página

Resumen

Los dropdowns son superposiciones contextuales y alternables para mostrar listas de enlaces y más. Se hacen interactivos con el plugin de JavaScript de dropdown de Bootstrap incluido. Se activan al hacer clic, no al pasar el cursor; esta es una decisión de diseño intencional.

Los dropdowns se basan en una biblioteca de terceros, Popper, que proporciona posicionamiento dinámico y detección de ventanas gráficas (viewports). Asegúrate de incluir popper.min.js antes del JavaScript de Bootstrap o usa bootstrap.bundle.min.js / bootstrap.bundle.js, que contiene Popper. Sin embargo, Popper no se usa para posicionar los dropdowns en las barras de navegación (navbars), ya que no se requiere posicionamiento dinámico.

Accesibilidad

El estándar WAI ARIA define un widget role="menu" real, pero este es específico para menús similares a aplicaciones que activan acciones o funciones. Los menús ARIA solo pueden contener elementos de menú, elementos de menú de casilla de verificación (checkbox menu items), elementos de menú de botón de radio, grupos de botones de radio y submenús.

Por otro lado, los dropdowns de Bootstrap están diseñados para ser genéricos y aplicables a una variedad de situaciones y estructuras de marcado. Por ejemplo, es posible crear dropdowns 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 role y aria- requeridos para los menús ARIA verdaderos. Los autores deberán incluir estos atributos más específicos por sí mismos.

Sin embargo, Bootstrap agrega soporte incorporado para la mayoría de las interacciones de menú estándar con el teclado, como la capacidad de moverse a través de elementos .dropdown-item individuales utilizando las teclas de cursor y cerrar el menú con la tecla Esc.

Ejemplos

Envuelve el interruptor del dropdown (tu botón o enlace) y el menú desplegable dentro de .dropdown, u otro elemento que declare position: relative;. Idealmente, deberías usar un elemento <button> como activador del dropdown, pero el plugin también funcionará con elementos <a>. Los ejemplos que se muestran aquí utilizan elementos semánticos <ul> cuando corresponde, pero se admite el marcado personalizado.

Botón único

Cualquier .btn único se puede convertir en un interruptor de dropdown con algunos cambios de marcado. Así es como puedes ponerlos a trabajar con elementos <button>:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Botón desplegable
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Aunque <button> es el control recomendado para un interruptor de dropdown, puede haber situaciones en las que debas usar un elemento <a>. Si lo haces, recomendamos agregar un atributo role="button" para transmitir adecuadamente el propósito del control a las tecnologías de asistencia, como los lectores de pantalla.

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Enlace desplegable
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

La mejor parte es que también puedes hacer esto con cualquier variante de botón:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Danger
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Botón dividido

De manera similar, crea dropdowns de botón dividido con prácticamente el mismo marcado que los dropdowns de botón único, pero con la adición de .dropdown-toggle-split para un espacio adecuado alrededor del indicador (caret) del dropdown.

Usamos esta clase adicional para reducir el relleno (padding) horizontal en ambos lados del indicador en un 25% y eliminar el margin-left que se agrega para los dropdowns de botones normales. Esos cambios adicionales mantienen el indicador centrado en el botón dividido y proporcionan un área de activación de tamaño más adecuado junto al botón principal.

<!-- Example split danger button -->
<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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Alternar dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Dimensionamiento

Los dropdowns de botones funcionan con botones de todos los tamaños, incluidos los botones desplegables predeterminados y divididos.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Botón grande
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Botón dividido grande
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Alternar dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Botón pequeño
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Botón dividido pequeño
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Alternar dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropdowns oscuros

Obsoleto en v5.3.0

Opta por dropdowns más oscuros para que coincidan con una barra de navegación oscura o un estilo personalizado agregando .dropdown-menu-dark a un .dropdown-menu existente. No se requieren cambios en los elementos del dropdown.

¡Atención! Las variantes oscuras para los componentes quedaron obsoletas en v5.3.0 con la introducción de los modos de color. En lugar de agregar .dropdown-menu-dark, establece data-bs-theme="dark" en el elemento root, un contenedor padre o el propio componente.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Botón desplegable
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Y poniéndolo en uso en una barra de navegación:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </button>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Direcciones

Las direcciones se invierten en el modo RTL. Como tal, .dropstart aparecerá en el lado derecho.

Centrado

Haz que el menú desplegable esté centrado debajo del interruptor con .dropdown-center en el elemento padre.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown centrado
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup (Desplegar hacia arriba)

Activa los menús desplegables por encima de los elementos agregando .dropup al elemento padre.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Dropup dividido
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Alternar dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropup centrado

Haz que el menú dropup esté centrado por encima del interruptor con .dropup-center en el elemento padre.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup centrado
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend (Desplegar hacia el final)

Activa los menús desplegables a la derecha de los elementos agregando .dropend al elemento padre.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Dropend dividido
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Alternar dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart (Desplegar hacia el inicio)

Activa los menús desplegables a la izquierda de los elementos agregando .dropstart al elemento padre.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Alternar dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Dropstart dividido
  </button>
</div>

Elementos de menú

Puedes utilizar elementos <a> o <button> como elementos de dropdown.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

También puedes crear elementos de dropdown no interactivos con .dropdown-item-text. Siéntete libre de estilizarlos más con CSS personalizado o utilidades de texto.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Texto del elemento de dropdown</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Activo

Agrega .active a los elementos del dropdown para estilizarlos como activos. Para transmitir el estado activo a las tecnologías de asistencia, utiliza el atributo aria-current — usando el valor page para la página actual, o true para el elemento actual en un conjunto.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Enlace normal</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Enlace activo</a></li>
  <li><a class="dropdown-item" href="#">Otro enlace</a></li>
</ul>

Deshabilitado

Agrega .disabled a los elementos del dropdown para estilizarlos como deshabilitados.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Enlace normal</a></li>
  <li><a class="dropdown-item disabled" aria-disabled="true">Enlace deshabilitado</a></li>
  <li><a class="dropdown-item" href="#">Otro enlace</a></li>
</ul>

Alineación del menú

Por defecto, un menú desplegable se coloca automáticamente al 100% desde la parte superior y a lo largo del lado izquierdo de su padre. Puedes cambiar esto con las clases direccionales .drop*, pero también puedes controlarlas con clases modificadoras adicionales.

Agrega .dropdown-menu-end a un .dropdown-menu para alinear a la derecha el menú desplegable. Las direcciones se reflejan cuando se usa Bootstrap en RTL, lo que significa que .dropdown-menu-end aparecerá en el lado izquierdo.

¡Atención! Los dropdowns se posicionan gracias a Popper, excepto cuando están contenidos en una barra de navegación.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Ejemplo de menú alineado a la derecha
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Alineación responsiva

Si deseas utilizar la alineación responsiva, deshabilita el posicionamiento dinámico agregando el atributo data-bs-display="static" y utiliza las clases de variación responsiva.

Para alinear a la derecha el menú desplegable con el punto de interrupción (breakpoint) dado o superior, agrega .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Alineado a la izquierda, pero alineado a la derecha en pantalla grande
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Para alinear a la izquierda el menú desplegable con el punto de interrupción dado o superior, agrega .dropdown-menu-end y .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Alineado a la derecha, pero alineado a la izquierda en pantalla grande
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Ten en cuenta que no necesitas agregar un atributo data-bs-display="static" a los botones desplegables en las barras de navegación, ya que Popper no se usa en las barras de navegación.

Opciones de alineación

Tomando la mayoría de las opciones que se muestran arriba, aquí hay una pequeña demostración de varias opciones de alineación de dropdown en un solo lugar.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Menú alineado a la derecha
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Alineado a la izquierda, alineado a la derecha en lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Alineado a la derecha, alineado a la izquierda en lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Contenido del menú

Cabeceras

Agrega una cabecera para etiquetar secciones de acciones en cualquier menú desplegable.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Cabecera de dropdown</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Divisores

Separa grupos de elementos de menú relacionados con un divisor.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Enlace separado</a></li>
</ul>

Texto

Coloca cualquier texto libre dentro de un menú desplegable con texto y utiliza utilidades de espaciado. Ten en cuenta que probablemente necesitarás estilos de dimensionamiento adicionales para limitar el ancho del menú.

html

<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
  <p>
    Un texto de ejemplo que fluye libremente dentro del menú desplegable.
  </p>
  <p class="mb-0">
    Y este es más texto de ejemplo.
  </p>
</div>

Formularios

Coloca un formulario dentro de un menú desplegable, o conviértelo en un menú desplegable, y utiliza utilidades de margen o relleno para darle el espacio negativo que requieres.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Dirección de correo electrónico</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Contraseña</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Contraseña">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Recordarme
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Iniciar sesión</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">¿Nuevo por aquí? Regístrate</a>
  <a class="dropdown-item" href="#">¿Olvidaste tu contraseña?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Formulario desplegable
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Dirección de correo electrónico</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Contraseña</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Contraseña">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Recordarme
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Iniciar sesión</button>
  </form>
</div>

Utiliza data-bs-offset o data-bs-reference para cambiar la ubicación del dropdown.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Alternar dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Comportamiento de cierre automático

Por defecto, el menú desplegable se cierra al hacer clic dentro o fuera del menú desplegable. Puedes utilizar la opción autoClose para cambiar este comportamiento del dropdown.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Dropdown predeterminado
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Activable por dentro
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Activable por fuera
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Cierre manual
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, los dropdowns ahora usan variables CSS locales en .dropdown-menu para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

scss/_dropdown.scss

--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Los elementos de dropdown incluyen al menos una variable que no está establecida en .dropdown. Esto te permite proporcionar un nuevo valor mientras Bootstrap usa un valor de respaldo de manera predeterminada.

--bs-dropdown-item-border-radius

La personalización a través de variables CSS se puede ver en la clase .dropdown-menu-dark donde anulamos valores específicos sin agregar selectores CSS duplicados.

scss/_dropdown.scss

--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Variables de Sass

Variables para todos los dropdowns:

scss/_variables.scss

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    var(--#{$prefix}body-color);
$dropdown-bg:                       var(--#{$prefix}body-bg);
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            var(--#{$prefix}border-radius);
$dropdown-border-width:             var(--#{$prefix}border-width);
$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}); // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               var(--#{$prefix}box-shadow);

$dropdown-link-color:               var(--#{$prefix}body-color);
$dropdown-link-hover-color:         $dropdown-link-color;
$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg);

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color);

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Variables para los dropdowns oscuros:

scss/_variables.scss

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Variables para los indicadores (carets) basados en CSS que indican la interactividad de un dropdown:

scss/_variables.scss

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Mixins de Sass

Los mixins se utilizan para generar los indicadores basados en CSS y se pueden encontrar en scss/mixins/_caret.scss.

scss/mixins/_caret.scss

@mixin caret-down($width: $caret-width) {
  border-top: $width solid;
  border-right: $width solid transparent;
  border-bottom: 0;
  border-left: $width solid transparent;
}

@mixin caret-up($width: $caret-width) {
  border-top: 0;
  border-right: $width solid transparent;
  border-bottom: $width solid;
  border-left: $width solid transparent;
}

@mixin caret-end($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: 0;
  border-bottom: $width solid transparent;
  border-left: $width solid;
}

@mixin caret-start($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: $width solid;
  border-bottom: $width solid transparent;
}

@mixin caret(
  $direction: down,
  $width: $caret-width,
  $spacing: $caret-spacing,
  $vertical-align: $caret-vertical-align
) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $spacing;
      vertical-align: $vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down($width);
      } @else if $direction == up {
        @include caret-up($width);
      } @else if $direction == end {
        @include caret-end($width);
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $spacing;
        vertical-align: $vertical-align;
        content: "";
        @include caret-start($width);
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Uso

A través de atributos de datos o JavaScript, el plugin dropdown alterna el contenido oculto (menús desplegables) al alternar la clase .show en el .dropdown-menu padre. Se confía en el atributo data-bs-toggle="dropdown" para cerrar los menús desplegables a nivel de aplicación, por lo que es una buena idea usarlo siempre.

En dispositivos táctiles, abrir un dropdown agrega controladores mouseover vacíos a los hijos inmediatos del elemento <body>. Este truco, ciertamente feo, es necesario para solucionar una peculiaridad en la delegación de eventos de iOS, que de otro modo evitaría que un toque en cualquier lugar fuera del dropdown active el código que lo cierra. Una vez cerrado el dropdown, estos controladores mouseover vacíos adicionales se eliminan.

A través de atributos de datos

Agrega data-bs-toggle="dropdown" a un enlace o botón para alternar un dropdown.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

A través de JavaScript

Los dropdowns deben tener data-bs-toggle="dropdown" en su elemento activador, independientemente de si llamas a tu dropdown a través de JavaScript o utilizas la data-api.

Llama a los dropdowns a través de JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

Opciones

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puedes añadir un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de mayúsculas y minúsculas del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. Por ejemplo, usa data-bs-custom-class="beautifier" en lugar de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos los componentes admiten un atributo de datos reservado experimental data-bs-config que puede albergar una configuración simple del componente como una cadena JSON. Cuando un elemento tiene los atributos data-bs-config='{"delay":0, "title":123}' y data-bs-title="456", el valor final de title será 456 y los atributos de datos separados anularán los valores proporcionados en data-bs-config. Además, los atributos de datos existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado fusionado de data-bs-config, data-bs- y el js object (objeto js) donde el último par clave-valor proporcionado anula a los demás.

Nombre	Tipo	Predeterminado	Descripción
`autoClose`	boolean, string	`true`	Configura el comportamiento de cierre automático del dropdown: `true`: el dropdown se cerrará haciendo clic fuera o dentro del menú desplegable. `false`: el dropdown se cerrará haciendo clic en el botón de alternancia y llamando manualmente al método `hide` o `toggle`. (Tampoco se cerrará presionando la tecla `Esc`) `'inside'`: el dropdown se cerrará (solo) haciendo clic dentro del menú desplegable. `'outside'`: el dropdown se cerrará (solo) haciendo clic fuera del menú desplegable. Nota: el dropdown siempre se puede cerrar con la tecla `Esc`.
`boundary`	string, element	`'clippingParents'`	Límite de restricción de desbordamiento (overflow constraint boundary) del menú desplegable (se aplica solo al modificador preventOverflow de Popper). Por defecto es `clippingParents` y puede aceptar una referencia HTMLElement (solo a través de JavaScript). Para obtener más información, consulta la documentación de detectOverflow de Popper.
`display`	string	`'dynamic'`	Por defecto, usamos Popper para el posicionamiento dinámico. Deshabilita esto con `static`.
`offset`	array, string, function	`[0, 2]`	Desplazamiento del dropdown en relación con su objetivo. Puedes pasar una cadena en atributos de datos con valores separados por comas como: `data-bs-offset="10,20"`. Cuando se utiliza una función para determinar el desplazamiento, se llama con un objeto que contiene la colocación de popper, la referencia y popper rects como primer argumento. El nodo DOM del elemento desencadenador se pasa como segundo argumento. La función debe devolver un array con dos números: skidding, distance. Para obtener más información, consulta la documentación de offset de Popper.
`popperConfig`	null, object, function	`null`	Para cambiar la configuración predeterminada de Popper de Bootstrap, consulta la configuración de Popper. Cuando se utiliza una función para crear la configuración de Popper, se llama con un objeto que contiene la configuración predeterminada de Popper de Bootstrap. Te ayuda a usar y fusionar la predeterminada con tu propia configuración. La función debe devolver un objeto de configuración para Popper.
`reference`	string, element, object	`'toggle'`	Elemento de referencia del menú desplegable. Acepta los valores de `'toggle'`, `'parent'`, una referencia HTMLElement o un objeto que proporcione `getBoundingClientRect`. Para obtener más información, consulta la documentación del constructor de Popper y la documentación de elementos virtuales.

Uso de una función con `popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Métodos

Método	Descripción
`dispose`	Destruye el dropdown de un elemento. (Elimina los datos almacenados en el elemento DOM)
`getInstance`	Método estático que te permite obtener la instancia de dropdown asociada a un elemento DOM, puedes usarlo así: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Método estático que devuelve una instancia de dropdown asociada a un elemento DOM o crea una nueva en caso de que no haya sido inicializada. Puedes usarlo así: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Oculta el menú desplegable de una barra de navegación o navegación por pestañas determinada.
`show`	Muestra el menú desplegable de una barra de navegación o navegación por pestañas determinada.
`toggle`	Alterna el menú desplegable de una barra de navegación o navegación por pestañas determinada.
`update`	Actualiza la posición del dropdown de un elemento.

Eventos

Todos los dropdownes se disparan en el elemento que los alterna y luego se propagan hacia arriba (bubble up). Por lo tanto, también puedes agregar escuchadores de eventos (event listeners) en el elemento padre del .dropdown-menu. Los eventos hide.bs.dropdown y hidden.bs.dropdown tienen una propiedad clickEvent (solo cuando el tipo de evento original es click) que contiene un objeto de evento para el evento de clic.

Tipo de evento	Descripción
`hide.bs.dropdown`	Se dispara inmediatamente cuando se llama al método de instancia `hide`.
`hidden.bs.dropdown`	Se dispara cuando el dropdown ha terminado de ocultarse del usuario y se han completado las transiciones CSS.
`show.bs.dropdown`	Se dispara inmediatamente cuando se llama al método de instancia `show`.
`shown.bs.dropdown`	Se dispara cuando el dropdown se ha hecho visible para el usuario y se han completado las transiciones CSS.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // hacer algo...
})

Dropdowns

¿Te gustó esta traducción?

Resumen

Accesibilidad

Ejemplos

Botón único

Botón dividido

Dimensionamiento

Dropdowns oscuros

Direcciones

Centrado

Dropup (Desplegar hacia arriba)

Dropup centrado

Dropend (Desplegar hacia el final)

Dropstart (Desplegar hacia el inicio)

Elementos de menú

Activo

Deshabilitado

Alineación del menú

Alineación responsiva

Opciones de alineación

Contenido del menú

Cabeceras

Cabecera de dropdown

Divisores

Texto

Formularios

Opciones de dropdown

Comportamiento de cierre automático

CSS

Variables

Variables de Sass

Mixins de Sass

Uso

A través de atributos de datos

A través de JavaScript

Opciones

Uso de una función con popperConfig

Métodos

Eventos

Uso de una función con `popperConfig`