Despregables

Alterna as superposicións contextuais para mostrar listas de ligazóns e moito máis co complemento despregable Bootstrap.

Nesta páxina

Visión xeral

Os menús despregables son superposicións contextuais alternables para mostrar listas de ligazóns e moito máis. Fanse interactivos co complemento de JavaScript Bootstrap incluído. Alternanse facendo clic, non pasando o rato; esta é unha decisión de deseño intencionada .

Os menús desplegables están construídos nunha biblioteca de terceiros, Popper , que proporciona un posicionamento dinámico e detección de vistas. Asegúrate de incluír popper.min.js antes do JavaScript de Bootstrap ou usa bootstrap.bundle.min.js/ bootstrap.bundle.jsque contén Popper. Popper non se usa para colocar menús despregables nas barras de navegación, aínda que non é necesario o posicionamento dinámico.

Accesibilidade

O estándar WAI ARIA role="menu" define un widget real , pero este é específico para menús tipo aplicación que activan accións ou funcións. Os menús de ARIA só poden conter elementos de menú, elementos de menú de caixa de verificación, elementos de menú de botóns de opción, grupos de botóns de opción e submenús.

Os menús despregables de Bootstrap, por outra banda, están deseñados para ser xenéricos e aplicables a unha variedade de situacións e estruturas de marcado. Por exemplo, é posible crear menús despregables que conteñan entradas adicionais e controis de formulario, como campos de busca ou formularios de inicio de sesión. Por este motivo, Bootstrap non espera (nin engade automaticamente) ningún dos atributos rolee aria-necesarios para os verdadeiros menús ARIA . Os autores terán que incluír estes atributos máis específicos.

Non obstante, Bootstrap engade soporte integrado para a maioría das interaccións estándar do menú do teclado, como a posibilidade de moverse por .dropdown-itemelementos individuais usando as teclas do cursor e pechar o menú coa ESCtecla.

Exemplos

Envolve o selector do menú despregable (o teu botón ou ligazón) e o menú despregable dentro .dropdownde , ou noutro elemento que declare position: relative;. Os menús desplegables pódense activar desde <a>ou <button>elementos que se axusten mellor ás túas necesidades potenciais. Os exemplos mostrados aquí usan <ul>elementos semánticos cando corresponda, pero admítese o marcado personalizado.

Botón único

Calquera .btnelemento pode converterse nun menú despregable con algúns cambios de marcado. Vexa como pode facelos funcionar con calquera dos <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>

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

A mellor parte é que tamén podes facelo con calquera 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 de división

Do mesmo xeito, cree menús despregables de botóns divididos practicamente co mesmo marcado que os menús despregábeis de botóns únicos, pero coa adición de .dropdown-toggle-splitpara un espazo adecuado ao redor do cursor do menú despregable.

Usamos esta clase adicional para reducir a horizontal paddinga cada lado do cursor nun 25 % e eliminar o margin-leftque se engade para os menús despregables de botóns habituais. Eses cambios adicionais manteñen o cursor centrado no botón dividido e proporcionan unha área de golpe de tamaño máis axeitado xunto ao 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>

Talla

Os menús despregables de botóns funcionan con botóns de todos os tamaños, incluídos os botóns predeterminados e 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ú despregable escuro

Opta por menús despregables máis escuros para combinar cunha barra de navegación escura ou un estilo personalizado engadindo .dropdown-menu-darka un existente .dropdown-menu. Non se requiren cambios nos elementos do menú despregable.

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>

E poñéndoo en uso nunha 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>

Direccións

RTL

As indicacións replícanse cando se usa Bootstrap en RTL, o que significa .dropstartque aparecerá no lado dereito.

Centrado

Fai o menú despregable centrado debaixo da alternancia co .dropdown-centerelemento 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>

Dropup

Activa os menús despregables enriba dos elementos engadindo .dropupao 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>

Dropup centrado

Fai o menú despregable centrado enriba da alternancia co .dropup-centerelemento 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

Activa os menús despregables á dereita dos elementos engadindo .dropendao 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>

Dropstart

Activa os menús despregables á esquerda dos elementos engadindo .dropstartao elemento pai.

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

Podes usar <a>ou <button>elementos 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>

Tamén podes crear elementos do menú despregable non interactivos con .dropdown-item-text. Non dubides en facer máis estilo con CSS personalizados ou 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

Engade .activeaos elementos no menú despregable para darlles un estilo como activos . Para transmitir o estado activo ás tecnoloxías de asistencia, use o aria-currentatributo, utilizando o pagevalor da páxina actual ou truedo elemento actual dun conxunto.

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

Engadir .disabledaos elementos no menú despregable para darlles un estilo desactivado .

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 xeito predeterminado, un menú despregable sitúase automaticamente ao 100 % desde a parte superior e ao lado esquerdo do seu pai. Podes cambialo coas .drop*clases direccionais, pero tamén podes controlalas con clases modificadoras adicionais.

Engadir .dropdown-menu-endao .dropdown-menualiñar á dereita o menú despregable. As indicacións replícanse cando se usa Bootstrap en RTL, o que significa .dropdown-menu-endque aparecerá no lado esquerdo.

Aviso! Os menús despregables colócanse grazas a Popper, excepto cando están contidos nunha 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>

Aliñación sensible

Se queres usar o aliñamento receptivo, desactiva o posicionamento dinámico engadindo o data-bs-display="static"atributo e utiliza as clases de variación sensible.

Para aliñar á dereita o menú despregable co punto de interrupción indicado ou máis grande, engade .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 aliñar o menú despregable á esquerda co punto de interrupción indicado ou máis grande, engade .dropdown-menu-ende .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>

Teña en conta que non é preciso engadir un data-bs-display="static"atributo aos botóns despregables nas barras de navegación, xa que Popper non se usa nas barras de navegación.

Opcións de aliñamento

Tomando a maioría das opcións mostradas arriba, aquí tes unha pequena demostración da pía da cociña de varias opcións de aliñamento do menú despregable nun só 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>

Cabeceiras

Engade unha cabeceira para etiquetar seccións de accións en calquera menú despregable.

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>

Separadores

Separe os grupos de elementos de menú relacionados cun 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 calquera texto de forma libre nun menú despregable con texto e use as utilidades de espazado . Teña en conta que probablemente necesitará estilos de tamaño adicionais para limitar o ancho do 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

Coloca un formulario nun menú despregable ou convérteo nun menú despregable e usa as utilidades de marxe ou de recheo para darlle o espazo negativo que necesitas.

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-offsetou data-bs-referencepara cambiar a localización do menú despregable.

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>

Comportamento de peche automático

Por defecto, o menú despregable está pechado ao facer clic dentro ou fóra do menú despregable. Podes usar a autoCloseopción para cambiar este comportamento do menú despregable.

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

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, os menús despregables agora usan variables CSS locais activadas .dropdown-menupara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

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

A personalización mediante variables CSS pódese ver na .dropdown-menu-darkclase onde anulamos valores específicos sen engadir 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};

Variables Sass

Variables para todos os menús despregables:

$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 o menú despregable escuro :

$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 os cursores baseados en CSS que indican a interactividade dun menú despregable:

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

Mixins

Os mixins úsanse para xerar os cursores baseados en CSS e pódense atopar 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 ou JavaScript, o complemento despregable alterna o contido oculto (menús despregables) ao alternar a .showclase no pai .dropdown-menu. Confíase data-bs-toggle="dropdown"no atributo para pechar os menús despregables a nivel de aplicación, polo que é unha boa idea usalo sempre.

Nos dispositivos táctiles, ao abrir un menú despregable engádense mouseovercontroladores baleiros aos fillos inmediatos do <body>elemento. Este truco feo é necesario para evitar unha peculiaridade na delegación de eventos de iOS , que doutro xeito evitaría que un toque en calquera lugar fóra do menú despregable active o código que pecha o menú despregable. mouseoverUnha vez que se pecha o menú despregable, elimínanse estes controladores baleiros adicionais .

A través de atributos de datos

Engadir data-bs-toggle="dropdown"a unha ligazón ou botón para alternar un menú despregable.

<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

Chame aos menús despregables mediante JavaScript:

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

`data-bs-toggle="dropdown"`aínda necesario

Independentemente de se chamas ao teu menú despregable mediante JavaScript ou usas a API de datos, data-bs-toggle="dropdown"sempre é necesario que estea presente no elemento de activación do menú despregable.

Opcións

Como as opcións se poden pasar a través de atributos de datos ou JavaScript, pode engadir un nome de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar o tipo de maiúsculas e minúsculas do nome da opción de " camelCase " a " kebab-case " ao pasar as opcións a través dos atributos de datos. Por exemplo, use data-bs-custom-class="beautifier"no canto de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos os compoñentes admiten un atributo de datos reservados experimentaisdata-bs-config que pode albergar unha configuración sinxela de compoñentes como cadea JSON. Cando un elemento ten data-bs-config='{"delay":0, "title":123}'e data-bs-title="456"atributos, o titlevalor final será 456e os atributos de datos separados anularán os valores indicados en data-bs-config. Ademais, os atributos de datos existentes poden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

Nome	Tipo	Por defecto	Descrición
`autoClose`	booleano, cadea	`true`	Configure o comportamento de peche automático do menú despregable: `true`- o menú despregable pecharase facendo clic fóra ou dentro do menú despregable. `false`- o menú despregable pecharase facendo clic no botón de alternancia e chamando manualmente `hide`ou ao `toggle`método. (Tampouco se pechará premendo a `esc`tecla) `'inside'`- o menú despregable pecharase (só) facendo clic dentro do menú despregable. `'outside'`- o menú despregable pecharase (só) facendo clic fóra do menú despregable. Nota: o menú despregable sempre se pode pechar coa `ESC`chave.
`boundary`	corda, elemento	`'clippingParents'`	Límite de restricción de desbordamento do menú despregable (aplícase só ao modificador preventOverflow de Popper). Por defecto é `clippingParents`e pode aceptar unha referencia HTMLElement (só a través de JavaScript). Para obter máis información, consulte os documentos detectOverflow de Popper .
`display`	corda	`'dynamic'`	Por defecto, usamos Popper para o posicionamento dinámico. Desactiva isto con `static`.
`offset`	matriz, cadea, función	`[0, 2]`	Compensación do menú despregable en relación ao seu obxectivo. Podes pasar unha cadea en atributos de datos con valores separados por comas como: `data-bs-offset="10,20"`. Cando se usa unha función para determinar a compensación, chámase cun obxecto que contén a posición do popper, a referencia e os rectos do popper como primeiro argumento. O nodo DOM do elemento desencadeante pásase como segundo argumento. A función debe devolver unha matriz con dous números: skidding , distance . Para obter máis información, consulte os documentos de offset de Popper .
`popperConfig`	nulo, obxecto, función	`null`	Para cambiar a configuración de Popper predeterminada de Bootstrap, consulte Configuración de Popper . Cando se usa unha función para crear a configuración de Popper, chámase cun obxecto que contén a configuración de Popper predeterminada de Bootstrap. Axúdache a usar e combinar a configuración predeterminada coa túa propia configuración. A función debe devolver un obxecto de configuración para Popper.
`reference`	cadea, elemento, obxecto	`'toggle'`	Elemento de referencia do menú despregable. Acepta os valores de `'toggle'`, `'parent'`, unha referencia HTMLElement ou un obxecto que proporciona `getBoundingClientRect`. Para obter máis información, consulte os documentos do constructor de Popper e os documentos de elementos virtuais .

Usando a función con`popperConfig`

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

Métodos

Método	Descrición
`dispose`	Destrúe o menú despregable dun elemento. (Elimina os datos almacenados no elemento DOM)
`getInstance`	Método estático que che permite obter a instancia despregable asociada a un elemento DOM, podes usalo así: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Método estático que devolve unha instancia despregable asociada a un elemento DOM ou crea unha nova no caso de que non se inicializou. Podes usalo así: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Oculta o menú despregable dunha determinada barra de navegación ou navegación por pestanas.
`show`	Mostra o menú despregable dunha determinada barra de navegación ou navegación por pestanas.
`toggle`	Alterna o menú despregable dunha determinada barra de navegación ou navegación por pestanas.
`update`	Actualiza a posición do menú despregable dun elemento.

Eventos

Todos os eventos do menú despregable desenvólvense no elemento de alternancia e, a continuación, burbullan. Así, tamén podes engadir oíntes de eventos no .dropdown-menuelemento principal de '. hide.bs.dropdowne hidden.bs.dropdownos eventos teñen unha clickEventpropiedade (só cando o tipo de evento orixinal é click) que contén un obxecto de evento para o evento de clic.

Tipo de evento	Descrición
`hide.bs.dropdown`	Dispara inmediatamente cando `hide`se chamou ao método de instancia.
`hidden.bs.dropdown`	Despediuse cando o menú despregable rematou de ocultarse ao usuario e se completaron as transicións CSS.
`show.bs.dropdown`	Dispara inmediatamente cando `show`se chama ao método de instancia.
`shown.bs.dropdown`	Activado cando o menú despregable se fixo visible para o usuario e se completaron as transicións CSS.

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

Despregables

Visión xeral

Accesibilidade

Exemplos

Botón único

Botón de división

Talla

Menú despregable escuro

Direccións

RTL

Centrado

Dropup

Dropup centrado

Dropend

Dropstart

Elementos do menú

Activo

Desactivado

Aliñación do menú

Aliñación sensible

Opcións de aliñamento

Contido do menú

Cabeceiras

Separadores

Texto

Formularios

Comportamento de peche automático

CSS

Variables

Variables Sass

Mixins

Uso

A través de atributos de datos

Vía JavaScript

`data-bs-toggle="dropdown"`aínda necesario

Opcións

Usando a función con`popperConfig`

Métodos

Eventos

Despregables

Visión xeral

Accesibilidade

Exemplos

Botón único

Botón de división

Talla

Menú despregable escuro

Direccións

RTL

Centrado

Dropup

Dropup centrado

Dropend

Dropstart

Elementos do menú

Activo

Desactivado

Aliñación do menú

Aliñación sensible

Opcións de aliñamento

Contido do menú

Cabeceiras

Cabeceira despregable

Separadores

Texto

Formularios

Opcións desplegables

Comportamento de peche automático

CSS

Variables

Variables Sass

Mixins

Uso

A través de atributos de datos

Vía JavaScript

data-bs-toggle="dropdown"aínda necesario

Opcións

Usando a función conpopperConfig

Métodos

Eventos

`data-bs-toggle="dropdown"`aínda necesario

Usando a función con`popperConfig`