Listas deplegables

Alterne las superposiciones contextuales para mostrar listas de enlaces y más con el complemento desplegable Bootstrap.

En esta página

Visión general

Los menús desplegables son superposiciones contextuales que se pueden alternar para mostrar listas de enlaces y más. Se hacen interactivos con el complemento de JavaScript desplegable de Bootstrap incluido. Se alternan al hacer clic, no al pasar el mouse; esta es una decisión de diseño intencional .

Los menús desplegables se basan en una biblioteca de terceros, Popper , que proporciona posicionamiento dinámico y detección de ventana gráfica. Asegúrese de incluir popper.min.js antes del JavaScript de Bootstrap o use bootstrap.bundle.min.js/ bootstrap.bundle.jsque contiene Popper. Popper no se usa para posicionar los menús desplegables en las barras de navegación, ya que no se requiere un posicionamiento dinámico.

Accesibilidad

El estándar WAI ARIA define un role="menu"widget real , pero esto es específico para menús similares a aplicaciones que desencadenan acciones o funciones. Los menús de ARIA solo pueden contener elementos de menú, elementos de menú de casillas de verificación, elementos de menú de botones de opción, grupos de botones de opción y submenús.

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

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

Ejemplos

Envuelve el conmutador del menú desplegable (tu botón o enlace) y el menú desplegable dentro .dropdownde u otro elemento que declare position: relative;. Los menús desplegables se pueden activar desde <a>o <button>elementos para adaptarse mejor a sus necesidades potenciales. Los ejemplos que se muestran aquí usan elementos semánticos <ul>cuando corresponde, pero se admite el marcado personalizado.

Botón único

Cualquiera .btnse puede convertir en un menú desplegable con algunos cambios de marcado. Así es como puede ponerlos a trabajar con cualquiera de los <button>elementos:

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>

Y con <a>elementos:

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>

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

Del mismo modo, cree menús desplegables de botones divididos con prácticamente el mismo marcado que los menús desplegables de un solo botón, pero con la adición de .dropdown-toggle-splitun espacio adecuado alrededor del símbolo de intercalación desplegable.

Usamos esta clase adicional para reducir la horizontal paddinga ambos lados del símbolo de intercalación en un 25 % y eliminar lo margin-leftque se agrega para los menús desplegables de botones regulares. Esos cambios adicionales mantienen el símbolo de intercalación centrado en el botón de división y brindan un área de impacto de tamaño más apropiado al lado del 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>

Dimensionamiento

Los menús desplegables 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">
    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>

Menús desplegables oscuros

Opte por menús desplegables más oscuros para que coincidan con una barra de navegación oscura o un estilo personalizado agregando .dropdown-menu-darka un archivo .dropdown-menu. No se requieren cambios en los elementos desplegables.

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 ponerlo 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">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <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

RTL

Las direcciones se reflejan cuando se usa Bootstrap en RTL, lo que significa .dropstartque aparecerán en el lado derecho.

Centrado

Haga que el menú desplegable esté centrado debajo de la palanca con .dropdown-centerel elemento principal.

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>

Caer hasta

Active los menús desplegables sobre los elementos al agregarlos .dropupal elemento principal.

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

desplegable centrado

Haga que el menú desplegable esté centrado sobre el interruptor con .dropup-centerel elemento principal.

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

Active los menús desplegables a la derecha de los elementos al agregar .dropendal elemento principal.

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

Inicio directo

Active los menús desplegables a la izquierda de los elementos al agregar .dropstartal elemento principal.

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

Puede usar elementos <a>o <button>como elementos desplegables.

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 puede crear elementos desplegables no interactivos con .dropdown-item-text. Siéntase libre de diseñar 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

Agregue .activeelementos en el menú desplegable para diseñarlos como activos . Para transmitir el estado activo a las tecnologías de asistencia, use el aria-currentatributo: use el pagevalor de la página actual o truedel 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>

Desactivado

Agregue .disabledelementos en el menú desplegable para diseñarlos como deshabilitados .

html

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

De forma predeterminada, un menú desplegable se coloca automáticamente al 100 % desde la parte superior y a lo largo del lado izquierdo de su elemento principal. Puede cambiar esto con las .drop*clases direccionales, pero también puede controlarlas con clases modificadoras adicionales.

Agregue .dropdown-menu-enda .dropdown-menupara alinear a la derecha el menú desplegable. Las direcciones se reflejan cuando se usa Bootstrap en RTL, lo que significa .dropdown-menu-endque aparecerán en el lado izquierdo.

¡Aviso! Los menús desplegables 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">
    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 receptiva

Si desea utilizar la alineación receptiva, deshabilite el posicionamiento dinámico agregando el data-bs-display="static"atributo y use las clases de variación receptivas.

Para alinear a la derecha el menú desplegable con el punto de interrupción dado o más grande, agregue .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ú desplegable con el punto de interrupción dado o más grande, agregue .dropdown-menu-endy .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>

Tenga en cuenta que no necesita agregar un data-bs-display="static"atributo 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 fregadero de cocina de varias opciones de alineación desplegable 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

Agregue un encabezado para etiquetar secciones de acciones en cualquier menú desplegable.

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

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

Coloque cualquier texto de forma libre dentro de un menú desplegable con texto y utilice las utilidades de espaciado . Tenga en cuenta que probablemente necesitará estilos de tamaño adicionales para restringir el ancho del menú.

html

<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

Coloque un formulario dentro de un menú desplegable, o conviértalo en un menú desplegable, y use utilidades de margen o relleno para darle el espacio negativo que necesita.

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 protected]">
    </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 protected]">
    </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>

Use data-bs-offseto data-bs-referencepara cambiar la ubicación del menú desplegable.

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

De forma predeterminada, el menú desplegable se cierra al hacer clic dentro o fuera del menú desplegable. Puede usar la autoCloseopción para cambiar este comportamiento del menú desplegable.

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 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="outside" 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="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 de variables CSS en evolución de Bootstrap, los menús desplegables ahora usan variables CSS locales .dropdown-menupara mejorar la personalización en tiempo real. Los valores para las variables CSS se establecen a través de Sass, por lo que también se admite la personalización de Sass.

  --#{$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};

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

  --#{$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};

Sass variables

Variables para todos los menús desplegables:

$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:             var(--#{$prefix}border-color-translucent);
$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-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 menú desplegable 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 símbolos de intercalación basados en CSS que indican la interactividad de un menú desplegable:

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

mezclas

Los mixins se utilizan para generar los símbolos de intercalación 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 de datos o JavaScript, el complemento desplegable alterna el contenido oculto (menús desplegables) al alternar la .showclase en el archivo principal .dropdown-menu. Se data-bs-toggle="dropdown"confía en el atributo 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 menú desplegable agrega mouseovercontroladores vacíos a los elementos secundarios inmediatos del <body>elemento. Este truco ciertamente feo es necesario para evitar una peculiaridad en la delegación de eventos de iOS , que de lo contrario evitaría que un toque en cualquier lugar fuera del menú desplegable active el código que cierra el menú desplegable. Una vez que se cierra el menú desplegable, estos mouseovercontroladores vacíos adicionales se eliminan.

A través de atributos de datos

Agregue data-bs-toggle="dropdown"a un enlace o botón para alternar un menú desplegable.

<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

Llame a los menús desplegables a través de JavaScript:

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

`data-bs-toggle="dropdown"`todavía se requiere

Independientemente de si llama a su menú desplegable a través de JavaScript o en su lugar usa la API de datos, data-bs-toggle="dropdown"siempre se requiere que esté presente en el elemento desencadenante del menú desplegable.

Opciones

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puede agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrese de cambiar el tipo de caso del nombre de la opción de " camelCase " a " kebab-case " al pasar las opciones a través de atributos de datos. Por ejemplo, use 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 reservados experimentaldata-bs-config que puede albergar una configuración de componente simple como una cadena JSON. Cuando un elemento tiene atributos data-bs-config='{"delay":0, "title":123}'y , el valor final será y los atributos de datos separados anularán los valores dados en . Además, los atributos de datos existentes pueden albergar valores JSON como .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Nombre	Escribe	Defecto	Descripción
`autoClose`	booleano, cadena	`true`	Configure el comportamiento de cierre automático del menú desplegable: `true`- el menú desplegable se cerrará haciendo clic fuera o dentro del menú desplegable. `false`- el menú desplegable se cerrará haciendo clic en el botón de alternar y llamando `hide`o `toggle`método manualmente. (Tampoco se cerrará presionando `esc`tecla) `'inside'`- el menú desplegable se cerrará (solo) haciendo clic dentro del menú desplegable. `'outside'`- el menú desplegable se cerrará (solo) haciendo clic fuera del menú desplegable. Nota: el menú desplegable siempre se puede cerrar con la `ESC`tecla.
`boundary`	cadena, elemento	`'clippingParents'`	Límite de restricción de desbordamiento del menú desplegable (se aplica solo al modificador preventOverflow de Popper). De forma predeterminada, es `clippingParents`y puede aceptar una referencia HTMLElement (solo a través de JavaScript). Para obtener más información, consulte la documentación de detectOverflow de Popper .
`display`	cuerda	`'dynamic'`	Por defecto, usamos Popper para el posicionamiento dinámico. Deshabilite esto con `static`.
`offset`	matriz, cadena, función	`[0, 2]`	Desplazamiento del menú desplegable en relación con su destino. Puede pasar una cadena en atributos de datos 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 ubicación del popper, la referencia y los rects del popper como su primer argumento. El nodo DOM del elemento desencadenante se pasa como segundo argumento. La función debe devolver una matriz con dos números: deslizamiento , distancia . Para obtener más información, consulte los documentos de compensación de Popper .
`popperConfig`	nulo, objeto, función	`null`	Para cambiar la configuración predeterminada de Popper de Bootstrap, consulte Configuración de Popper . Cuando se usa una función para crear la configuración Popper, se llama con un objeto que contiene la configuración Popper predeterminada de Bootstrap. Le ayuda a usar y fusionar el valor predeterminado con su propia configuración. La función debe devolver un objeto de configuración para Popper.
`reference`	cadena, elemento, objeto	`'toggle'`	Elemento de referencia del menú desplegable. Acepta los valores de `'toggle'`, `'parent'`una referencia HTMLElement o un objeto que proporciona `getBoundingClientRect`. Para obtener más información, consulte la documentación del constructor de Popper y la documentación del elemento virtual .

Uso de la 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 menú desplegable de un elemento. (Elimina los datos almacenados en el elemento DOM)
`getInstance`	Método estático que le permite obtener la instancia desplegable asociada a un elemento DOM, puede usarlo así: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Método estático que devuelve una instancia desplegable asociada a un elemento DOM o crea una nueva en caso de que no se haya inicializado. Puedes usarlo así: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Oculta el menú desplegable de una barra de navegación determinada o navegación con pestañas.
`show`	Muestra el menú desplegable de una barra de navegación determinada o navegación con pestañas.
`toggle`	Alterna el menú desplegable de una barra de navegación determinada o navegación con pestañas.
`update`	Actualiza la posición del menú desplegable de un elemento.

Eventos

Todos los eventos desplegables se activan en el elemento de alternancia y luego se expanden. Por lo tanto, también puede agregar detectores de eventos en el .dropdown-menuelemento principal de . hide.bs.dropdowny hidden.bs.dropdownlos eventos tienen una clickEventpropiedad (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 activa inmediatamente cuando `hide`se llama al método de instancia.
`hidden.bs.dropdown`	Se activa cuando el menú desplegable ha terminado de ocultarse para el usuario y se han completado las transiciones de CSS.
`show.bs.dropdown`	Se activa inmediatamente cuando `show`se llama al método de instancia.
`shown.bs.dropdown`	Se activa cuando el menú desplegable se ha hecho visible para el usuario y se han completado las transiciones de CSS.

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

Listas deplegables

Visión general

Accesibilidad

Ejemplos

Botón único

botón dividir

Dimensionamiento

Menús desplegables oscuros

Direcciones

RTL

Centrado

Caer hasta

desplegable centrado

Dropend

Inicio directo

Elementos de menú

Activo

Desactivado

Alineación del menú

Alineación receptiva

Opciones de alineación

Contenido del menú

Encabezados

Divisores

Texto

Formularios

Comportamiento de cierre automático

CSS

Variables

Sass variables

mezclas

Uso

A través de atributos de datos

A través de JavaScript

`data-bs-toggle="dropdown"`todavía se requiere

Opciones

Uso de la función con`popperConfig`

Métodos

Eventos

Listas deplegables

Visión general

Accesibilidad

Ejemplos

Botón único

botón dividir

Dimensionamiento

Menús desplegables oscuros

Direcciones

RTL

Centrado

Caer hasta

desplegable centrado

Dropend

Inicio directo

Elementos de menú

Activo

Desactivado

Alineación del menú

Alineación receptiva

Opciones de alineación

Contenido del menú

Encabezados

Encabezado desplegable

Divisores

Texto

Formularios

Opciones desplegables

Comportamiento de cierre automático

CSS

Variables

Sass variables

mezclas

Uso

A través de atributos de datos

A través de JavaScript

data-bs-toggle="dropdown"todavía se requiere

Opciones

Uso de la función conpopperConfig

Métodos

Eventos

`data-bs-toggle="dropdown"`todavía se requiere

Uso de la función con`popperConfig`