Dropdows

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

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 JavaScript desplegable Bootstrap incluido. Se alternan al hacer clic, no al desplazarse; esta es una decisión de diseño intencional .

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

Si está construyendo nuestro JavaScript desde la fuente, requiere util.js .

Accesibilidad

El estándar WAI ARIA define un role="menu" widget real , pero esto es específico para menús similares a aplicaciones que activan 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 atributos role y aria- requeridos para los verdaderos menús ARIA . Los autores deberán incluir estos atributos más específicos ellos mismos.

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-item elementos individuales usando las teclas del cursor y cerrar el menú con la ESC tecla.

Ejemplos

Envuelva la palanca del menú desplegable (su botón o enlace) y el menú desplegable dentro .dropdown , 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.

Botón único

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


  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

Y con <a> elementos:


  <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown link
    </a>
  
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

La mejor parte es que también puede 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>

Botón de división

De manera similar, 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-split un espacio adecuado alrededor del símbolo de intercalación desplegable.

Usamos esta clase adicional para reducir la horizontal padding a ambos lados del símbolo de intercalación en un 25% y eliminar la margin-left que 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 proporcionan un área de golpe de tamaño más apropiado junto al botón principal.


  <!-- Example split danger button -->
  <div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Large button
    </button>
    <div class="dropdown-menu">
      ...
    </div>
  </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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      ...
    </div>
  </div>
  
  <!-- Small button groups (default and split) -->
  <div class="btn-group">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Small button
    </button>
    <div class="dropdown-menu">
      ...
    </div>
  </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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      ...
    </div>
  </div>

Direcciones

Dropup

Active los menús desplegables encima de los elementos añadiendo .dropup al elemento principal.


  <!-- Default dropup button -->
  <div class="btn-group dropup">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropup
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>

Dropright

Active los menús desplegables a la derecha de los elementos agregándolos .dropright al elemento principal.


  <!-- Default dropright button -->
  <div class="btn-group dropright">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropright
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  
  <!-- Split dropright button -->
  <div class="btn-group dropright">
    <button type="button" class="btn btn-secondary">
      Split dropright
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropright</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>

Dropleft

Active los menús desplegables a la izquierda de los elementos agregándolos .dropleft al elemento principal.


  <!-- Default dropleft button -->
  <div class="btn-group dropleft">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropleft
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  
  <!-- Split dropleft button -->
  <div class="btn-group">
    <div class="btn-group dropleft" role="group">
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropleft</span>
      </button>
      <div class="dropdown-menu">
        <!-- Dropdown menu links -->
      </div>
    </div>
    <button type="button" class="btn btn-secondary">
      Split dropleft
    </button>
  </div>

Históricamente, los contenidos del menú desplegable tenían que ser enlaces, pero ese ya no es el caso con v4. Ahora, opcionalmente, puede usar <button> elementos en sus menús desplegables en lugar de solo <a> s.


  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
      <button class="dropdown-item" type="button">Action</button>
      <button class="dropdown-item" type="button">Another action</button>
      <button class="dropdown-item" type="button">Something else here</button>
    </div>
  </div>

También puede crear elementos desplegables no interactivos con .dropdown-item-text . Siéntase libre de darle más estilo con CSS personalizado o utilidades de texto.


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

Activo

Agregue .active a elementos en el menú desplegable para diseñarlos como activos .


  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Regular link</a>
    <a class="dropdown-item active" href="#">Active link</a>
    <a class="dropdown-item" href="#">Another link</a>
  </div>

Discapacitado

Agregue .disabled a elementos en el menú desplegable para diseñarlos como deshabilitados .


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

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. Agregue .dropdown-menu-right a .dropdown-menu para alinear a la derecha el menú desplegable.

¡Aviso! Los menús desplegables se posicionan gracias a Popper.js (excepto cuando están contenidos en una barra de navegación).


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Right-aligned menu
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <button class="dropdown-item" type="button">Action</button>
      <button class="dropdown-item" type="button">Another action</button>
      <button class="dropdown-item" type="button">Something else here</button>
    </div>
  </div>

Alineación receptiva

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

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


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
      Left-aligned but right aligned when large screen
    </button>
    <div class="dropdown-menu dropdown-menu-lg-right">
      <button class="dropdown-item" type="button">Action</button>
      <button class="dropdown-item" type="button">Another action</button>
      <button class="dropdown-item" type="button">Something else here</button>
    </div>
  </div>

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


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
      Right-aligned but left aligned when large screen
    </button>
    <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
      <button class="dropdown-item" type="button">Action</button>
      <button class="dropdown-item" type="button">Another action</button>
      <button class="dropdown-item" type="button">Something else here</button>
    </div>
  </div>

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

Encabezados

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


  <div class="dropdown-menu">
    <h6 class="dropdown-header">Dropdown header</h6>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>

Divisores

Separe los grupos de elementos de menú relacionados con un divisor.


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

Texto

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


  <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
    <p>
      Some example text that's free-flowing within the dropdown menu.
    </p>
    <p class="mb-0">
      And this is more example text.
    </p>
  </div>

Formularios

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


  <div class="dropdown-menu">
    <form class="px-4 py-3">
      <div class="form-group">
        <label for="exampleDropdownFormEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword1">Password</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="dropdownCheck">
          <label class="form-check-label" for="dropdownCheck">
            Remember me
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up</a>
    <a class="dropdown-item" href="#">Forgot password?</a>
  </div>


  <form class="dropdown-menu p-4">
    <div class="form-group">
      <label for="exampleDropdownFormEmail2">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword2">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="form-group">
      <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>

Utilice data-offset o data-reference para cambiar la ubicación del menú desplegable.


  <div class="d-flex">
    <div class="dropdown mr-1">
      <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
        Offset
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary">Reference</button>
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
  </div>

Uso

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

En los dispositivos con capacidad táctil, la apertura de un menú desplegable agrega controladores vacíos ( $.noop ) mouseover a los hijos inmediatos del <body> elemento. Este truco ciertamente feo es necesario para evitar una peculiaridad en la delegación de eventos de iOS , que de otro modo 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 mouseover controladores vacíos adicionales se eliminan.

A través de atributos de datos

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


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

Vía JavaScript

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


  $('.dropdown-toggle').dropdown()

`data-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-toggle="dropdown" siempre se requiere que esté presente en el elemento disparador del menú desplegable.

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-offset="".

Nombre	Tipo	Defecto	Descripción
compensar	numero \| cadena \| función	0	Desplazamiento del menú desplegable en relación con su objetivo. Cuando se utiliza una función para determinar el desplazamiento, se llama con un objeto que contiene los datos del desplazamiento como primer argumento. La función debe devolver un objeto con la misma estructura. El nodo DOM del elemento desencadenante se pasa como segundo argumento. Para obtener más información, consulte los documentos de compensación de Popper.js .
dar la vuelta	booleano	cierto	Permita que el menú desplegable se invierta en caso de superposición en el elemento de referencia. Para obtener más información, consulte los documentos flip de Popper.js .
Perímetro	cadena \| elemento	'scrollParent'	Límite de restricción de desbordamiento del menú desplegable. Acepta los valores de `'viewport'`, `'window'`, `'scrollParent'` , o una referencia de HTMLElement (JavaScript solamente). Para obtener más información, consulte los documentos de preventOverflow de Popper.js .
referencia	cadena \| elemento	'palanca'	Elemento de referencia del menú desplegable. Acepta los valores de `'toggle'`, `'parent'` o una referencia HTMLElement. Para obtener más información, consulte los documentos referenceObject de Popper.js.
monitor	cuerda	'dinámica'	De forma predeterminada, utilizamos Popper.js para el posicionamiento dinámico. Desactive esto con `static`.
popperConfig	nulo \| objeto	nulo	Para cambiar la configuración predeterminada de Popper.js de Bootstrap, consulte la configuración de Popper.js

Tenga en cuenta que cuando boundary se establece en cualquier valor que no sea 'scrollParent' , el estilo position: static se aplica al .dropdown contenedor.

Métodos

Método	Descripción
`$().dropdown('toggle')`	Alterna el menú desplegable de una determinada barra de navegación o navegación con pestañas.
`$().dropdown('show')`	Muestra el menú desplegable de una determinada barra de navegación o navegación con pestañas.
`$().dropdown('hide')`	Oculta el menú desplegable de una determinada barra de navegación o navegación con pestañas.
`$().dropdown('update')`	Actualiza la posición del menú desplegable de un elemento.
`$().dropdown('dispose')`	Destruye el menú desplegable de un elemento.

Eventos

Todos los eventos desplegables se activan en el .dropdown-menu elemento padre de y tienen una relatedTarget propiedad, cuyo valor es el elemento de ancla de alternancia. hide.bs.dropdown y los hidden.bs.dropdown eventos tienen una clickEvent propiedad (solo cuando el tipo de evento original es click ) que contiene un objeto de evento para el evento de clic.

Evento	Descripción
`show.bs.dropdown`	Este evento se activa inmediatamente cuando se llama al método show instance.
`shown.bs.dropdown`	Este evento se activa cuando el menú desplegable se ha hecho visible para el usuario (esperará a que se completen las transiciones CSS).
`hide.bs.dropdown`	Este evento se dispara inmediatamente cuando se llama al método de la instancia oculta.
`hidden.bs.dropdown`	Este evento se activa cuando el menú desplegable ha terminado de ocultarse al usuario (esperará a que se completen las transiciones CSS).


  $('#myDropdown').on('show.bs.dropdown', function () {
    // do something...
  })

Dropdows

Visión general

Accesibilidad

Ejemplos

Botón único

Botón de división

Dimensionamiento

Direcciones

Dropup

Dropright

Dropleft

Elementos de menú

Activo

Discapacitado

Alineación del menú

Alineación receptiva

Contenido del menú

Encabezados

Divisores

Texto

Formularios

Uso

A través de atributos de datos

Vía JavaScript

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

Opciones

Métodos

Eventos

Dropdows

Visión general

Accesibilidad

Ejemplos

Botón único

Botón de división

Dimensionamiento

Direcciones

Dropup

Dropright

Dropleft

Elementos de menú

Activo

Discapacitado

Alineación del menú

Alineación receptiva

Contenido del menú

Encabezados

Dropdown header

Divisores

Texto

Formularios

Opciones desplegables

Uso

A través de atributos de datos

Vía JavaScript

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

Opciones

Métodos

Eventos

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