El componente Desplegable de Bootstrap

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

Descripción general del componente Desplegable

Los menús desplegables son superposiciones contextuales alternables para mostrar listas de enlaces y más. Se vuelven interactivos con el complemento JavaScript desplegable Bootstrap incluido. Se alternan haciendo clic, no al pasar el cursor; 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 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. Sin embargo, Popper no se utiliza para posicionar menús desplegables en las barras de navegación, ya que no se requiere posicionamiento dinámico.

Accesibilidad del componente Desplegable

Es estándar WAI ARIA define un role="menu" widget, pero esto es específico de menús similares a aplicaciones que activan acciones o funciones. Los menús ARIA solo pueden contener elementos de menú, elementos de menú de casilla de verificación, 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 y controles de formulario adicionales, como campos de búsqueda o formularios de inicio de sesión. Por este motivo, Bootstrap no espera (ni agrega automáticamente) ninguno de los atributos role y aria- necesarios para menús verdaderamente ARIA. Los autores deberán incluir ellos mismos estos atributos más específicos.

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

Ejemplos del componente Desplegable

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

Botón único

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

HTML

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Botón desplegable
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
    </ul>
</div>

Si bien <button> es el control recomendado para un menú desplegable, puede haber situaciones en las que tengas que usar un <a>. Si lo haces, te recomendamos agregar un atributo role="button" para transmitir adecuadamente el propósito del control a tecnologías de asistencia como lectores de pantalla.

HTML

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

    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
    </ul>
</div>

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

HTML

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
        aria-expanded="false">Primary</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
        aria-expanded="false">Secondary</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
        aria-expanded="false">Success</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
        aria-expanded="false">Info</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown"
        aria-expanded="false">Warning</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<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="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->

Botones divididos

De manera similar, crea 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-split para lograr un espaciado adecuado alrededor del cursor (caret) desplegable.

Usamos esta clase adicional para reducir el padding horizontal a cada lado del cursor en un 25% y eliminar el margin-left eso se agrega para los menús desplegables de botones regulares. Esos cambios adicionales mantienen el cursor centrado en el botón de división y proporcionan un área de impacto de tamaño más apropiado al lado del botón principal.

HTML

<div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-primary 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="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<div class="btn-group">
    <button type="button" class="btn btn-secondary">Secondary</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">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<div class="btn-group">
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success 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="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<div class="btn-group">
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-info 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="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<div class="btn-group">
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-warning 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="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->
<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="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div><!-- /btn-group -->

Tamaños del componente Desplegable

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

HTML

<div class="btn-group">
    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Botón grande
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-lg btn-secondary">Botón dividido grande</button>
    <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div>

HTML

<div class="btn-group">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Botón pequeño
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-sm btn-secondary">Botón dividido pequeño</button>
    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div>

Menús desplegables oscuros

Obsoleto en v5.3.0

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

Precaución

¡Atención! Las variantes oscuras para componentes quedaron obsoletas en la versión 5.3.0 con la introducción de modos de color. En lugar de agregar .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">
        Botón desplegable
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li><a class="dropdown-item active" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</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="#">Barra de navegación</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false"
            aria-label="Alternar navegación">
            <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">
                        Desplegable
                    </button>
                    <ul class="dropdown-menu dropdown-menu-dark">
                        <li><a class="dropdown-item" href="#">Acción</a></li>
                        <li><a class="dropdown-item" href="#">Otra acción</a></li>
                        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Direcciones del componente Desplegable

Nota

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

Centrado

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

HTML

<div class="dropdown-center">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Menú desplegable centrado
    </button>
    <ul class="dropdown-menu" style="">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Acción dos</a></li>
        <li><a class="dropdown-item" href="#">Acción tres</a></li>
    </ul>
</div>

Dropup

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

HTML

<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="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div>
<div class="btn-group dropup">
    <button type="button" class="btn btn-secondary">
        Menú desplegable dividido
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div>

Dropup centrado

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

HTML

<div class="dropup-center dropup">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Menú desplegable centrado
    </button>
    <ul class="dropdown-menu" style="">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Acción dos</a></li>
        <li><a class="dropdown-item" href="#">Acción tres</a></li>
    </ul>
</div>

Dropend

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

HTML

<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" style="">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div>
<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" style="">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div>

Dropstart

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

HTML

<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" style="">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
</div>
<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" style="">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
    <button type="button" class="btn btn-secondary">
        Split dropstart
    </button>
</div>

Elementos del menú desplegable

Puedes 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">
        Desplegable
    </button>
    <ul class="dropdown-menu" style="">
        <li><button class="dropdown-item" type="button">Acción</button></li>
        <li><button class="dropdown-item" type="button">Otra acción</button></li>
        <li><button class="dropdown-item" type="button">Algo más aquí.</button></li>
    </ul>
</div>

También puedes crear elementos desplegables no interactivos con .dropdown-item-text. Siéntete libre de diseñar aún más con CSS personalizado o utilidades de texto.

HTML

<ul class="dropdown-menu">
    <li><span class="dropdown-item-text">Texto del elemento desplegable</span></li>
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
    <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
</ul>

Activo

Agrega .active a los elementos en el menú desplegable para diseñarlos como activos. Para transmitir el estado activo a las tecnologías de asistencia, utiliza el atributo aria-current, utilizando el valor page para la página actual o true para la elemento actual en un conjunto.

HTML

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

Deshabilitado

Agrega .disabled a los elementos en el menú desplegable para mostrarlos como deshabilitados.

HTML

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

Alineación del menú desplegable

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 padre. Puedes cambiar esto con las clases direccionales .drop*, pero también puedes controlarlas con clases modificadoras adicionales.

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

Nota

¡Atención! 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">
            Ejemplo de menú alineado a la derecha
        </button>
        <ul class="dropdown-menu dropdown-menu-end" style="">
            <li><button class="dropdown-item" type="button">Acción</button></li>
            <li><button class="dropdown-item" type="button">Otra acción</button></li>
            <li><button class="dropdown-item" type="button">Algo más aquí.</button></li>
        </ul>
    </div>

Alineación responsive

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

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

HTML

    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
            data-bs-display="static" aria-expanded="false">
            Alineado a la izquierda pero alineado a la derecha cuando la pantalla es grande
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end">
            <li><button class="dropdown-item" type="button">Acción</button></li>
            <li><button class="dropdown-item" type="button">Otra acción</button></li>
            <li><button class="dropdown-item" type="button">Algo más aquí.</button></li>
        </ul>
    </div>

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

HTML

    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
            data-bs-display="static" aria-expanded="false">
            Alineado a la derecha pero alineado a la izquierda cuando la pantalla es grande
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
            <li><button class="dropdown-item" type="button">Acción</button></li>
            <li><button class="dropdown-item" type="button">Otra acción</button></li>
            <li><button class="dropdown-item" type="button">Algo más aquí.</button></li>
        </ul>
    </div>

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

Opciones de alineación

Tomando la mayoría de las opciones que se muestran arriba, aquí tienes una pequeña demostración de fregadero de cocina con 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">
            Desplegable
        </button>
        <ul class="dropdown-menu" style="">
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
        </ul>
    </div>

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

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

    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
            data-bs-display="static" aria-expanded="false">
            Alineado a la derecha, alineado a la izquierda lg
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</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="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</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="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</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="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
        </ul>
    </div>

Contenido del menú desplegable

Encabezados

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

HTML

    <ul class="dropdown-menu">
        <li>
            <h6 class="dropdown-header">Encabezado de dropdown</h6>
        </li>
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</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="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>

Texto

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

HTML

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

Formularios

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

HTML

    <div class="dropdown-menu">
        <form class="px-4 py-3">
            <div class="mb-3">
                <label for="exampleDropdownFormEmail1" class="form-label">Dirección de correo electrónico</label>
                <input type="email" class="form-control" id="exampleDropdownFormEmail1"
                    placeholder="[email protected]">
            </div>
            <div class="mb-3">
                <label for="exampleDropdownFormPassword1" class="form-label">Contraseña</label>
                <input type="password" class="form-control" id="exampleDropdownFormPassword1"
                    placeholder="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">
                        Recuérdame
                    </label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Iniciar sesión</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">¿Nuevo por aquí? Registrate</a>
        <a class="dropdown-item" href="#">¿Olvidaste tu contraseña?</a>
    </div>

HTML

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

Opciones del componente Desplegable

Usa data-bs-offset o data-bs-reference para 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="#">Acción</a></li>
                <li><a class="dropdown-item" href="#">Otra acción</a></li>
                <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-secondary">Referencia</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="#">Acción</a></li>
                <li><a class="dropdown-item" href="#">Otra acción</a></li>
                <li><a class="dropdown-item" href="#">Algo más aquí.</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Enlace separado</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. Puedes utilizar la opción autoClose 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">
            Menú desplegable predeterminado
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</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">
            Se puede hacer clic en el interior.
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</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">
            Se puede hacer clic afuera
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
            <li><a class="dropdown-item" href="#">Elemento del menú</a></li>
        </ul>
    </div>

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

Personalización del CSS del componente

Variables Sass del componente

Agregado 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 en .dropdown-menu para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

scss/_dropdown.scss

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

Nota

Los elementos desplegables incluyen al menos una variable que no está configurada en .dropdown. Esto te permite proporcionar un nuevo valor mientras que Bootstrap utiliza de forma predeterminada un valor alternativo.

• --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 agregar selectores CSS duplicados.

scss/_dropdown.scss

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

Variables para todos los menús desplegables:

scss/_variables.scss

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 menú desplegable oscuro:

scss/_variables.scss

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 signos de intercalación (carets) basados en CSS que indican la interactividad de un menú desplegable:

scss/_variables.scss

scss/_variables.scss

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

Mixins Sass del componente

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

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 del componente Desplegable

A través de atributos de datos o JavaScript, el complemento desplegable alterna el contenido oculto (menús desplegables) alternando la clase .show en el .dropdown-menu. El atributo data-bs-toggle="dropdown" se utiliza para cerrar menús desplegables a nivel de aplicación, por lo que es una buena idea usarlo siempre.

Nota

En dispositivos táctiles, abrir un menú desplegable agrega controladores mouseover vacíos a los elementos secundarios inmediatos del elemento <body>. Este truco ciertamente feo es necesario para solucionar 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 controladores mouseover vacíos adicionales se eliminan.

Vía atributos de datos

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

HTML

<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

Precaución

Los menús desplegables deben tener data-bs-toggle="dropdown" en su elemento desencadenante, independientemente de si llamas a tu menú desplegable a través de JavaScript o usas la API de datos.

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

JavaScript

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

Opciones

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puedes agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate 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, utiliza 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 experimental reservado data-bs-config que puede albergar datos simples de configuración del componente como una cadena JSON. Cuando un elemento tiene los atributos data-bs-config='{"delay":0, "title":123}' y data-bs-title="456", el valor final de title será 456 y los atributos de datos separados sobrescribirán los valores proporcionados en data-bs-config. Además, los atributos de datos existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

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

Nombre	Tipo	Predeterminado	Descripción
autoClose	boolean, string	true	Configura el comportamiento de cierre automático del menú desplegable: * true - el menú desplegable se cerrará al hacer clic fuera o dentro del menú desplegable. * false - el menú desplegable se cerrará haciendo clic en el botón de alternancia y llamando manualmente al método hide o toggle. (Tampoco se cerrará presionando la tecla Esc) * 'inside' - el menú desplegable se cerrará (solo) al hacer clic dentro del menú desplegable. * 'outside' - el menú desplegable se cerrará (solo) al hacer clic fuera del menú desplegable. Nota: el menú desplegable siempre se puede cerrar con la tecla Esc.
boundary	string, element	'clippingParents'	Límite de restricción de desbordamiento del menú desplegable (se aplica solo al modificador preventOverflow de Popper). Por defecto es clippingParents y puede aceptar una referencia HTMLElement (solo a través de JavaScript). Para obtener más información, consulta la documentación de detectOverflow de Popper.
display	string	'dynamic'	De forma predeterminada, usamos Popper para el posicionamiento dinámico. Desactiva esto con static.
offset	array, string, function	[0, 2]	Desplazamiento del menú desplegable con respecto a su objetivo. Puedes 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 rectificadores del popper como primer argumento. El nodo DOM del elemento desencadenante se pasa como segundo argumento. La función debe devolver una matriz con dos números: skidding, distance. Para obtener más información, consulta la documentación de offsetde Popper.
popperConfig	null, object, function	null	Para cambiar la configuración predeterminada de Popper de Bootstrap, consulta 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 de Popper predeterminada de Bootstrap. Te ayuda a utilizar y fusionar el valor predeterminado con tu propia configuración. La función debe devolver un objeto de configuración para Popper.
reference	string, element, object	'toggle'	Elemento de referencia del menú desplegable. Acepta los valores de 'toggle', 'parent', una referencia HTMLElement o un objeto que proporciona getBoundingClientRect. Para obtener más información, consulta la documentación del constructor y documentación de elementos virtuales.

Usar la función con popperConfig

JavaScript

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 te permite obtener la instancia desplegable asociada a un elemento DOM, puedes 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 haya sido inicializada. Puedes usarlo así: bootstrap.Dropdown.getOrCreateInstance(element).
hide	Oculta el menú desplegable de una barra de navegación o navegación con pestañas determinada.
show	Muestra el menú desplegable de una barra de navegación o navegación con pestañas determinada.
toggle	Alterna el menú desplegable de una barra de navegación determinada o de 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 aparecen. Por lo tanto, también puedes agregar detectores 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 de clic.

Tipo de evento	Descripción
hide.bs.dropdown	Se activa inmediatamente cuando se llama al método de instancia hide.
hidden.bs.dropdown	Se activa cuando el menú desplegable termina de ocultarse al usuario y se completan las transiciones CSS.
show.bs.dropdown	Se activa inmediatamente cuando se llama al método de instancia show.
shown.bs.dropdown	Se activa cuando el menú desplegable se hace visible para el usuario y se completan las transiciones CSS.

JavaScript

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