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;. Los dropdowns se pueden activar desde elementos <a> o <button> para adaptarse mejor a tus posibles necesidades. Los ejemplos mostrados aquí usan elementos semánticos <ul> cuando es apropiado, pero se admite markup personalizado.

Botón simple

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>:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>

Y con elementos <a>:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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">
    Action
  </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">Action</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

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.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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:

<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">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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

RTL

Las direcciones se invierten al usar Bootstrap en RTL, lo que significa que .dropstart aparecerá en el lado derecho.

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>

Dropright

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">
    Dropright
  </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 Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropleft

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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Puedes usar elementos <a> o <button> como elementos del dropdown.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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.

<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.

<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.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">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.

<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.

<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.

<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.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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.

<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.

<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ú.

<div class="dropdown-menu p-4 text-muted" 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.

<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>

<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>

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

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

Sass

Variables

Variables para todos los dropdowns:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

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

$dropdown-link-disabled-color:      $gray-500;

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

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

Variables para el dropdown oscuro:

$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:

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

Mixins

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

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

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

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

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

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

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

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

    &: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 con pantalla táctil, abrir un dropdown añade manejadores vacíos de mouseover 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 disparara el código que cierra el dropdown. Una vez que el dropdown se cierra, estos manejadores vacíos adicionales de mouseover se eliminan.

A través de atributos data

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

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

A través de JavaScript

Llama a los dropdowns a través de JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

`data-bs-toggle="dropdown"` sigue siendo obligatorio

Independientemente de si llamas a tu dropdown a través de JavaScript o usas la data-api, data-bs-toggle="dropdown" siempre debe estar presente en el elemento disparador del dropdown.

Opciones

Las opciones se pueden pasar a través de atributos data o JavaScript. Para los atributos data, añade el nombre de la opción a data-bs-, como en data-bs-offset="". Asegúrate de cambiar el tipo de capitalización del nombre de la opción de camelCase a kebab-case al pasar las opciones a través de atributos data. Por ejemplo, en lugar de usar data-bs-autoClose="false", usa data-bs-auto-close="false".

Nombre	Tipo	Predeterminado	Descripción
`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 a través de JavaScript). Para más información consulta la documentación de detectOverflow de 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.
`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 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 colocación de popper, la referencia y los rects de 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.
`autoClose`	boolean \| string	`true`	Configura el comportamiento de cierre automático del 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 toggle y llamando 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.
`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.

Usar una función con `popperConfig`

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

Métodos

Método	Descripción
`toggle`	Alterna 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.
`hide`	Oculta el menú dropdown de un navbar o navegación con pestañas dado.
`update`	Actualiza la posición del dropdown de un elemento.
`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 del DOM o crea una nueva en caso de que no haya sido inicializada. Puedes usarlo así: `bootstrap.Dropdown.getOrCreateInstance(element)`

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.

Método	Descripción
`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.
`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.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Dropdowns

Descripción general

Accesibilidad

Ejemplos

Botón simple

Botón dividido

Tamaños

Dropdowns oscuros

Direcciones

RTL

Dropup

Dropright

Dropleft

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

Sass

Variables

Mixins

Uso

A través de atributos data

A través de JavaScript

`data-bs-toggle="dropdown"` sigue siendo obligatorio

Opciones

Usar una función con `popperConfig`

Métodos

Eventos

Dropdowns

Descripción general

Accesibilidad

Ejemplos

Botón simple

Botón dividido

Tamaños

Dropdowns oscuros

Direcciones

RTL

Dropup

Dropright

Dropleft

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 del dropdown

Comportamiento de cierre automático

Sass

Variables

Mixins

Uso

A través de atributos data

A través de JavaScript

data-bs-toggle="dropdown" sigue siendo obligatorio

Opciones

Usar una función con popperConfig

Métodos

Eventos

`data-bs-toggle="dropdown"` sigue siendo obligatorio

Usar una función con `popperConfig`