Dropdowns

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

On this page

Descripción general

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

Los dropdowns están construidos sobre una biblioteca de terceros, Popper, que proporciona posicionamiento dinámico y detección de viewport. Asegúrate de incluir popper.min.js antes del JavaScript de Bootstrap o usa bootstrap.bundle.min.js / bootstrap.bundle.js que contiene Popper. Popper no se usa para posicionar dropdowns en 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 tipo aplicación que disparan acciones o funciones. Los menús ARIA solo pueden contener elementos de menú, elementos de menú con checkbox, elementos de menú con radio button, grupos de radio button y submenús.

Los dropdowns de Bootstrap, por otro lado, están diseñados para ser genéricos y aplicables a una variedad de situaciones y estructuras de markup. Por ejemplo, es posible crear dropdowns que contengan inputs y controles de formulario adicionales, como campos de búsqueda o formularios de inicio de sesión. Por esta razón, Bootstrap no espera (ni añade automáticamente) ninguno de los atributos role y aria- requeridos para menús ARIA verdaderos. Los autores tendrán que incluir estos atributos más específicos ellos mismos.

Sin embargo, Bootstrap sí añade soporte integrado para la mayoría de las interacciones estándar de menú con teclado, como la capacidad de moverse por los elementos .dropdown-item individuales usando las teclas del cursor y cerrar el menú con la tecla Esc.

Ejemplos

Envuelve el toggle del dropdown (tu botón o enlace) y el menú del dropdown dentro de .dropdown, u otro elemento que declare position: relative;. Idealmente, deberías usar un elemento <button> como disparador del dropdown, pero el plugin también funcionará con elementos <a>. Los ejemplos mostrados aquí usan elementos semánticos <ul> cuando es apropiado, pero se soporta markup personalizado.

Botón único

Cualquier .btn individual se puede convertir en un toggle de dropdown con algunos cambios de markup. Así es como puedes ponerlos a funcionar con elementos <button>:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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 toggle de dropdown, puede haber situaciones en las que tengas que usar un elemento <a>. Si lo haces, recomendamos añadir 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">
    Dropdown link
  </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>

Lo mejor es que puedes hacer esto con cualquier variante de botón, tambié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 markup que los dropdowns de botón simple, pero con la adición de .dropdown-toggle-split para un espaciado adecuado alrededor del caret del dropdown.

Usamos esta clase adicional para reducir el padding horizontal a cada lado del caret en un 25% y eliminar el margin-left que se añade para los dropdowns de botón regulares. Estos cambios adicionales mantienen el caret centrado en el botón dividido y proporcionan un área de clic más apropiadamente dimensionada 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">Toggle 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>

Tamaños

Los dropdowns de botón funcionan con botones de todos los tamaños, incluyendo botones dropdown 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">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </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">Toggle 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">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </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">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropdowns oscuros

Obsoleto en v5.3.0

Opta por dropdowns más oscuros para coincidir con un navbar oscuro o estilo personalizado añadiendo .dropdown-menu-dark a un .dropdown-menu existente. No se requieren cambios en los elementos del dropdown.

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

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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 usándolo en un navbar:

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 modo RTL. Por lo tanto, .dropstart aparecerá en el lado derecho.

Centrado

Haz que el menú desplegable se centre debajo del toggle 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">
    Centered dropdown
  </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

Activa menús dropdown por encima de los elementos añadiendo .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">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropup centrado

Haz que el menú dropup se centre encima del toggle 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">
    Centered dropup
  </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

Activa menús dropdown a la derecha de los elementos añadiendo .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">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

Activa menús dropdown a la izquierda de los elementos añadiendo .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">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Puedes usar elementos <a> o <button> como elementos del 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 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">Dropdown item text</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

Añade .active a los elementos del dropdown para estilizarlos como activos. Para transmitir el estado activo a las tecnologías de asistencia, usa 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="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Deshabilitado

Añade .disabled a los elementos del dropdown para estilizarlos como deshabilitados.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Por defecto, un menú dropdown se posiciona 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.

Añade .dropdown-menu-end a un .dropdown-menu para alinear a la derecha el menú dropdown. Las direcciones se invierten al usar 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 un navbar.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </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 responsive

Si quieres usar alineación responsive, desactiva el posicionamiento dinámico añadiendo el atributo data-bs-display="static" y usa las clases de variación responsive.

Para alinear a la derecha el menú dropdown con el breakpoint dado o mayor, añade .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">
    Left-aligned but right aligned when large screen
  </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ú dropdown con el breakpoint dado o mayor, añade .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">
    Right-aligned but left aligned when large screen
  </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 añadir un atributo data-bs-display="static" a los botones dropdown en navbars, ya que Popper no se usa en navbars.

Opciones de alineación

Tomando la mayoría de las opciones mostradas arriba, aquí hay un pequeño demo que incluye de todo con 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">
    Right-aligned menu
  </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">
    Left-aligned, right-aligned 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">
    Right-aligned, left-aligned 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>

Encabezados

Añade un encabezado para etiquetar secciones de acciones en cualquier menú dropdown.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</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="#">Separated link</a></li>
</ul>

Texto

Coloca cualquier texto de formato libre dentro de un menú dropdown con texto y usa 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>
    Some example text that’s free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Formularios

Coloca un formulario dentro de un menú dropdown, o conviértelo en un menú dropdown, y usa utilidades de margin o padding para darle el espacio negativo que necesites.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </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">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</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">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </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">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

Usa 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">Toggle 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ú dropdown se cierra al hacer clic dentro o fuera del menú dropdown. Puedes usar 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">
    Default 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 class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable inside
  </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">
    Clickable outside
  </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">
    Manual close
  </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

Añadido en v5.2.0

Como parte del enfoque evolutivo de variables CSS de Bootstrap, los dropdowns ahora usan variables CSS locales en .dropdown-menu para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen mediante Sass, por lo que la personalización con Sass también sigue siendo 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 del 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 por defecto.

--bs-dropdown-item-border-radius

La personalización a través de variables CSS se puede ver en la clase .dropdown-menu-dark donde sobrescribimos valores específicos sin añadir 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 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 el dropdown oscuro:

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 carets basados en CSS que indican la interactividad del dropdown:

scss/_variables.scss

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

Mixins Sass

Los mixins se usan para generar los carets 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 data o JavaScript, el plugin dropdown alterna el contenido oculto (menús dropdown) alternando la clase .show en el .dropdown-menu padre. El atributo data-bs-toggle="dropdown" se usa para cerrar los menús dropdown a nivel de aplicación, por lo que es una buena idea usarlo siempre.

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

Vía atributos data

Añade 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>

Vía JavaScript

Los dropdowns deben tener data-bs-toggle="dropdown" en su elemento disparador, independientemente de si llamas a tu dropdown vía JavaScript o usas 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 vía atributos data 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 capitalización del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones vía atributos data. 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 soportan un atributo data 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 data separados sobrescribirán los valores dados en data-bs-config. Además, los atributos data existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado de combinar data-bs-config, data-bs-, y el objeto js, donde el último par clave-valor dado sobrescribe a los demás.

Nombre	Tipo	Predeterminado	Descripción
`autoClose`	boolean, string	`true`	Configure the auto close behavior of the dropdown: `true` - el dropdown se cerrará al hacer clic fuera o dentro del menú dropdown. `false` - el dropdown se cerrará al hacer clic en el botón de conmutación y llamar manualmente al método `hide` o `toggle`. (Tampoco se cerrará al presionar la tecla `Esc`) `'inside'` - el dropdown se cerrará (solo) al hacer clic dentro del menú dropdown. `'outside'` - el dropdown se cerrará (solo) al hacer clic fuera del menú dropdown. Note: the dropdown can always be closed with the `Esc` key.
`boundary`	string, element	`'clippingParents'`	Límite de restricción de overflow del menú dropdown (se aplica solo al modificador preventOverflow de Popper). Por defecto es `clippingParents` y puede aceptar una referencia HTMLElement (solo mediante JavaScript). Para más información consulta la documentación de detectOverflow de Popper.
`display`	string	`'dynamic'`	Por defecto, usamos Popper para el posicionamiento dinámico. Desactívalo con `static`.
`offset`	array, string, function	`[0, 2]`	Desplazamiento del dropdown relativo a su objetivo. Puedes pasar una cadena en los atributos data con valores separados por comas como: `data-bs-offset="10,20"`. Cuando se usa una función para determinar el desplazamiento, se llama con un objeto que contiene la posición del popper, la referencia y los rects del popper como primer argumento. El nodo DOM del elemento disparador se pasa como segundo argumento. La función debe devolver un array con dos números: skidding, distance. Para 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 usa 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 configuración 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ú dropdown. Acepta los valores `'toggle'`, `'parent'`, una referencia HTMLElement o un objeto que proporciona `getBoundingClientRect`. Para más información consulta la documentación del constructor de Popper y la documentación de elementos virtuales.

Usando 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ú dropdown de un navbar o navegación con pestañas dado.
`show`	Muestra el menú dropdown de un navbar o navegación con pestañas dado.
`toggle`	Alterna el menú dropdown de un navbar o navegación con pestañas dado.
`update`	Actualiza la posición del dropdown de un elemento.

Eventos

Todos los eventos del dropdown se disparan en el elemento toggle y luego se propagan. Así que también puedes añadir escuchadores de eventos 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 click.

Tipo de evento	Descripción
`hide.bs.dropdown`	Se dispara inmediatamente cuando se ha llamado al método de instancia `hide`.
`hidden.bs.dropdown`	Se dispara cuando el dropdown ha terminado de ocultarse del usuario y las transiciones CSS se han completado.
`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 al usuario y las transiciones CSS se han completado.

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

Dropdowns

Descripción general

Accesibilidad

Ejemplos

Botón único

Botón dividido

Tamaños

Dropdowns oscuros

Direcciones

Centrado

Dropup

Dropup centrado

Dropend

Dropstart

Elementos del menú

Activo

Deshabilitado

Alineación del menú

Alineación responsive

Opciones de alineación

Contenido del menú

Encabezados

Divisores

Texto

Formularios

Comportamiento de cierre automático

CSS

Variables

Variables Sass

Mixins Sass

Uso

Vía atributos data

Vía JavaScript

Opciones

Usando función con `popperConfig`

Métodos

Eventos

Dropdowns

Descripción general

Accesibilidad

Ejemplos

Botón único

Botón dividido

Tamaños

Dropdowns oscuros

Direcciones

Centrado

Dropup

Dropup centrado

Dropend

Dropstart

Elementos del menú

Activo

Deshabilitado

Alineación del menú

Alineación responsive

Opciones de alineación

Contenido del menú

Encabezados

Encabezado dropdown

Divisores

Texto

Formularios

Opciones de dropdown

Comportamiento de cierre automático

CSS

Variables

Variables Sass

Mixins Sass

Uso

Vía atributos data

Vía JavaScript

Opciones

Usando función con popperConfig

Métodos

Eventos

Usando función con `popperConfig`