Desplegables

Commuteu les superposicions contextuals per mostrar llistes d'enllaços i més amb el connector desplegable Bootstrap.

En aquesta pàgina

Visió general

Els menús desplegables són superposicions contextuals alternables per mostrar llistes d'enllaços i molt més. Es fan interactius amb el connector de JavaScript desplegable Bootstrap inclòs. S'activen fent clic, no passant el cursor; aquesta és una decisió de disseny intencionada .

Els desplegables es basen en una biblioteca de tercers, Popper , que proporciona un posicionament dinàmic i detecció de finestres. Assegureu-vos d'incloure popper.min.js abans del JavaScript de Bootstrap o utilitzeu bootstrap.bundle.min.js/ bootstrap.bundle.jsque conté Popper. Popper no s'acostuma a col·locar els menús desplegables a les barres de navegació, ja que no es requereix un posicionament dinàmic.

Accessibilitat

L' estàndard WAI ARIA defineix un role="menu"estris real , però això és específic dels menús semblants a aplicacions que desencadenen accions o funcions. Els menús ARIA només poden contenir elements de menú, elements de menú de caselles de selecció, elements de menú de botons d'opció, grups de botons d'opció i submenús.

Els menús desplegables de Bootstrap, d'altra banda, estan dissenyats per ser genèrics i aplicables a una varietat de situacions i estructures de marcatge. Per exemple, és possible crear menús desplegables que continguin entrades addicionals i controls de formulari, com ara camps de cerca o formularis d'inici de sessió. Per aquest motiu, Bootstrap no espera (ni afegeix automàticament) cap dels atributs rolei necessaris per als menús ARIA reals. Els autors hauran d'incloure ells mateixos aquests atributs més específics.aria-

Tanmateix, Bootstrap afegeix suport integrat per a la majoria de les interaccions estàndard del menú del teclat, com ara la possibilitat de moure's per .dropdown-itemelements individuals mitjançant les tecles del cursor i tancar el menú amb la ESCtecla.

Exemples

Emboliqui el commutador del menú desplegable (el teu botó o enllaç) i el menú desplegable dins .dropdown, o un altre element que declari position: relative;. Els desplegables es poden activar a partir d' <a>elements <button>que s'ajustin millor a les vostres necessitats potencials. Els exemples que es mostren aquí utilitzen <ul>elements semàntics quan escau, però s'admet el marcatge personalitzat.

Botó únic

Qualsevol sol .btnes pot convertir en un menú desplegable amb alguns canvis de marcatge. A continuació s'explica com podeu posar-los en funcionament amb qualsevol dels <button>elements:

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>

I amb <a>elements:

html

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

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

La millor part és que també podeu fer-ho amb qualsevol variant de botó:

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

De la mateixa manera, creeu menús desplegables de botons dividits amb pràcticament el mateix marcatge que els menús desplegables d'un sol botó, però amb l'addició d' .dropdown-toggle-splitun espai adequat al voltant del cursor desplegable.

Utilitzem aquesta classe addicional per reduir paddingun 25% l'horitzontal a banda i banda del cursor i eliminar el margin-leftque s'afegeix als menús desplegables de botons habituals. Aquests canvis addicionals mantenen el cursor centrat al botó dividit i proporcionen una àrea de mida més adequada al costat del botó 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

Els menús desplegables de botons funcionen amb botons de totes les mides, inclosos els botons desplegables predeterminats i dividits.

<!-- 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ú desplegable fosc

Opteu per menús desplegables més foscos per fer coincidir una barra de navegació fosca o un estil personalitzat afegint -los .dropdown-menu-darka un existent .dropdown-menu. No cal fer canvis als elements desplegables.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

I fent-lo servir en una barra de navegació:

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>

Indicacions

RTL

Les indicacions es reflecteixen quan utilitzeu Bootstrap a RTL, és a dir .dropstart, apareixeran al costat dret.

Centrat

Feu que el menú desplegable se centre a sota de la commutació amb .dropdown-centerl'element 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 els menús desplegables a sobre dels elements afegint -los .dropupa l'element 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 centrat

Feu que el menú desplegable estigui centrat a sobre de la commutació amb .dropup-centerl'element 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 els menús desplegables a la dreta dels elements afegint -los .dropenda l'element 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 els menús desplegables a l'esquerra dels elements afegint -los .dropstarta l'element principal.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Podeu utilitzar <a>o <button>elements com a elements 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>

També podeu crear elements desplegables no interactius amb .dropdown-item-text. No dubteu a crear més estil amb CSS o utilitats de text personalitzades.

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>

Actiu

Afegeix .activeals elements del menú desplegable per dissenyar-los com a actius . Per transmetre l'estat actiu a les tecnologies d'assistència, utilitzeu l' aria-currentatribut, utilitzant el pagevalor de la pàgina actual o truede l'element actual d'un conjunt.

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>

Inhabilitat

Afegeix .disabledals elements del menú desplegable per dissenyar-los com a desactivats .

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>

Per defecte, un menú desplegable es col·loca automàticament al 100% des de la part superior i al costat esquerre del seu pare. Podeu canviar-ho amb les .drop*classes direccionals, però també podeu controlar-les amb classes modificadores addicionals.

Afegeix .dropdown-menu-enda una .dropdown-menualineació a la dreta del menú desplegable. Les indicacions es reflecteixen quan utilitzeu Bootstrap a RTL, és a dir .dropdown-menu-end, apareixeran al costat esquerre.

Caps amunt! Els desplegables es col·loquen gràcies a Popper, excepte quan estan continguts en una barra de navegació.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Alineació sensible

Si voleu utilitzar l'alineació sensible, desactiveu el posicionament dinàmic afegint l' data-bs-display="static"atribut i utilitzeu les classes de variació sensible.

Per alinear a la dreta el menú desplegable amb el punt d'interrupció donat o més gran, afegiu .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>

Per alinear el menú desplegable a l' esquerra.dropdown-menu-end amb el punt d'interrupció donat o més gran, afegiu i .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>

Tingueu en compte que no cal que afegiu cap data-bs-display="static"atribut als botons desplegables de les barres de navegació, ja que Popper no s'utilitza a les barres de navegació.

Opcions d'alineació

Prenent la majoria de les opcions que es mostren anteriorment, aquí teniu una petita demostració de la pica de cuina de diverses opcions d'alineació desplegables en un sol lloc.

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>

Capçaleres

Afegiu una capçalera per etiquetar seccions d'accions a qualsevol menú desplegable.

html

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

Divisors

Separeu els grups d'elements de menú relacionats amb un divisor.

html

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

Text

Col·loqueu qualsevol text de forma lliure dins d'un menú desplegable amb text i utilitzeu les utilitats d'espaiat . Tingueu en compte que probablement necessitareu estils de mida addicionals per limitar l'amplada del menú.

html

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

Formes

Col·loqueu un formulari dins d'un menú desplegable o feu-lo en un menú desplegable i utilitzeu les utilitats de marge o farciment per donar-li l'espai negatiu que necessiteu.

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>

Utilitzeu data-bs-offseto data-bs-referenceper canviar la ubicació del menú desplegable.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Comportament de tancament automàtic

Per defecte, el menú desplegable es tanca quan es fa clic dins o fora del menú desplegable. Podeu utilitzar l' autoCloseopció per canviar aquest comportament del menú desplegable.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Les variables

Afegit a la v5.2.0

Com a part de l'evolució de l'enfocament de les variables CSS de Bootstrap, els menús desplegables ara utilitzen variables CSS locals .dropdown-menuper a una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

La personalització mitjançant variables CSS es pot veure a la .dropdown-menu-darkclasse on substituïm valors específics sense afegir selectors CSS duplicats.

  --#{$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 per a tots els desplegables:

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

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

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

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

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

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Variables per al menú desplegable fosc :

$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 per als cursots basats en CSS que indiquen la interactivitat d'un desplegable:

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

Mixins

Els mixins s'utilitzen per generar els cursots basats en CSS i es poden trobar a 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;
    }
  }
}

Ús

Mitjançant atributs de dades o JavaScript, el connector desplegable alterna el contingut ocult (menús desplegables) canviant la .showclasse al pare .dropdown-menu. Es data-bs-toggle="dropdown"confia en l'atribut per tancar menús desplegables a nivell d'aplicació, així que és una bona idea utilitzar-lo sempre.

En dispositius tàctils, l'obertura d'un menú desplegable afegeix mouseovercontroladors buits als fills immediats de l' <body>element. Aquest hack, certament lleig, és necessari per evitar una peculiaritat en la delegació d'esdeveniments d'iOS , que d'altra manera evitaria que un toc en qualsevol lloc fora del menú desplegable desencadenés el codi que tanca el menú desplegable. Un cop tancat el menú desplegable, mouseovers'eliminen aquests controladors buits addicionals.

Mitjançant atributs de dades

Afegeix data-bs-toggle="dropdown"a un enllaç o un botó per canviar un menú desplegable.

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

Mitjançant JavaScript

Truqueu als menús desplegables mitjançant JavaScript:

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

`data-bs-toggle="dropdown"`encara requerit

Independentment de si truqueu al vostre menú desplegable mitjançant JavaScript o utilitzeu l'api de dades, data-bs-toggle="dropdown"sempre cal que estigui present a l'element activador del menú desplegable.

Opcions

Com que les opcions es poden passar mitjançant atributs de dades o JavaScript, podeu afegir un nom d'opció a data-bs-, com a data-bs-animation="{value}". Assegureu-vos de canviar el tipus de cas del nom de l'opció de " camelCase " a " kebab-case " quan passeu les opcions mitjançant atributs de dades. Per exemple, utilitzeu data-bs-custom-class="beautifier"en comptes de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, tots els components admeten un atribut de dades reservades experimentalsdata-bs-config que pot albergar una configuració senzilla de components com a cadena JSON. Quan un element té data-bs-config='{"delay":0, "title":123}'i data-bs-title="456"atributs, el titlevalor final serà 456i els atributs de dades independents substituiran els valors donats a data-bs-config. A més, els atributs de dades existents poden albergar valors JSON com data-bs-delay='{"show":0,"hide":150}'.

Nom	Tipus	Per defecte	Descripció
`autoClose`	booleà, cadena	`true`	Configureu el comportament de tancament automàtic del menú desplegable: `true`- el desplegable es tancarà fent clic fora o dins del menú desplegable. `false`- el menú desplegable es tancarà fent clic al botó de commutació i trucant `hide`o `toggle`mètode manualment. (Tampoc es tancarà prement `esc`la tecla) `'inside'`- el desplegable es tancarà (només) fent clic dins del menú desplegable. `'outside'`- el desplegable es tancarà (només) fent clic fora del menú desplegable. Nota: el desplegable sempre es pot tancar amb la `ESC`clau.
`boundary`	corda, element	`'clippingParents'`	Límit de restricció de desbordament del menú desplegable (només s'aplica al modificador preventOverflow de Popper). Per defecte és `clippingParents`i pot acceptar una referència HTMLElement (només mitjançant JavaScript). Per obtenir més informació, consulteu els documents detectOverflow de Popper .
`display`	corda	`'dynamic'`	Per defecte, utilitzem Popper per al posicionament dinàmic. Desactiveu-ho amb `static`.
`offset`	matriu, cadena, funció	`[0, 2]`	Desplaçament del menú desplegable en relació al seu objectiu. Podeu passar una cadena en atributs de dades amb valors separats per comes com: `data-bs-offset="10,20"`. Quan s'utilitza una funció per determinar el desplaçament, s'anomena amb un objecte que conté la ubicació del popper, la referència i rectes del popper com a primer argument. El node DOM de l'element desencadenant es passa com a segon argument. La funció ha de retornar una matriu amb dos números: skidding , distance . Per obtenir més informació, consulteu els documents d'offset de Popper .
`popperConfig`	nul, objecte, funció	`null`	Per canviar la configuració de Popper per defecte de Bootstrap, vegeu la configuració de Popper . Quan s'utilitza una funció per crear la configuració de Popper, s'anomena amb un objecte que conté la configuració de Popper per defecte de Bootstrap. Us ajuda a utilitzar i combinar el valor predeterminat amb la vostra pròpia configuració. La funció ha de retornar un objecte de configuració per a Popper.
`reference`	corda, element, objecte	`'toggle'`	Element de referència del menú desplegable. Accepta els valors de `'toggle'`, `'parent'`, una referència HTMLElement o un objecte que proporciona `getBoundingClientRect`. Per obtenir més informació, consulteu els documents del constructor de Popper i els documents d'elements virtuals .

Utilitzant la funció amb`popperConfig`

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

Mètodes

Mètode	Descripció
`dispose`	Destrueix el menú desplegable d'un element. (Elimina les dades emmagatzemades a l'element DOM)
`getInstance`	Mètode estàtic que us permet obtenir la instància desplegable associada a un element DOM, podeu utilitzar-lo així: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Mètode estàtic que retorna una instància desplegable associada a un element DOM o en crea una de nova en cas que no s'hagi inicialitzat. Podeu utilitzar-lo així: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Oculta el menú desplegable d'una barra de navegació o navegació per pestanyes determinada.
`show`	Mostra el menú desplegable d'una barra de navegació determinada o una navegació per pestanyes.
`toggle`	Activa o desactiva el menú desplegable d'una barra de navegació determinada o de la navegació per pestanyes.
`update`	Actualitza la posició del menú desplegable d'un element.

Esdeveniments

Tots els esdeveniments desplegables es desenvolupen a l'element de commutació i després es fan bombolles. Així, també podeu afegir oients d'esdeveniments a l' .dropdown-menuelement principal de '. hide.bs.dropdowni hidden.bs.dropdownels esdeveniments tenen una clickEventpropietat (només quan el tipus d'esdeveniment original és click) que conté un objecte d'esdeveniment per a l'esdeveniment de clic.

Tipus d'esdeveniment	Descripció
`hide.bs.dropdown`	S'activa immediatament quan `hide`s'ha cridat el mètode d'instància.
`hidden.bs.dropdown`	S'activa quan s'ha acabat d'ocultar el menú desplegable per a l'usuari i s'han completat les transicions CSS.
`show.bs.dropdown`	S'activa immediatament quan `show`es crida el mètode d'instància.
`shown.bs.dropdown`	S'activa quan el menú desplegable s'ha fet visible per a l'usuari i s'han completat les transicions CSS.

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

Desplegables

Visió general

Accessibilitat

Exemples

Botó únic

Botó dividit

Talla

Menú desplegable fosc

Indicacions

RTL

Centrat

Dropup

Dropup centrat

Dropend

Dropstart

Elements del menú

Actiu

Inhabilitat

Alineació del menú

Alineació sensible

Opcions d'alineació

Contingut del menú

Capçaleres

Divisors

Text

Formes

Comportament de tancament automàtic

CSS

Les variables

Variables Sass

Mixins

Ús

Mitjançant atributs de dades

Mitjançant JavaScript

`data-bs-toggle="dropdown"`encara requerit

Opcions

Utilitzant la funció amb`popperConfig`

Mètodes

Esdeveniments

Desplegables

Visió general

Accessibilitat

Exemples

Botó únic

Botó dividit

Talla

Menú desplegable fosc

Indicacions

RTL

Centrat

Dropup

Dropup centrat

Dropend

Dropstart

Elements del menú

Actiu

Inhabilitat

Alineació del menú

Alineació sensible

Opcions d'alineació

Contingut del menú

Capçaleres

Capçalera desplegable

Divisors

Text

Formes

Opcions desplegables

Comportament de tancament automàtic

CSS

Les variables

Variables Sass

Mixins

Ús

Mitjançant atributs de dades

Mitjançant JavaScript

data-bs-toggle="dropdown"encara requerit

Opcions

Utilitzant la funció ambpopperConfig

Mètodes

Esdeveniments

`data-bs-toggle="dropdown"`encara requerit

Utilitzant la funció amb`popperConfig`