Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
Check
in English

Nneɛma a wɔde gu fam

Toggle contextual overlays ma ɛkyerɛ links a wɔahyehyɛ ne nea ɛkeka ho denam Bootstrap dropdown plugin no so.

Wɔ kratafa yi so

Nsɛm a Wɔaka abom

Dropdowns yɛ toggleable, nsɛm a ɛfa ho a wɔde kata so a wɔde kyerɛ link ahorow a wɔahyehyɛ ne nea ɛkeka ho. Wɔde Bootstrap dropdown JavaScript plugin a ɛka ho no ayɛ nkitahodi. Wɔnam klik so na ɛsakra wɔn, na ɛnyɛ sɛ wɔde wɔn ho to so; eyi yɛ gyinaesi a wɔahyɛ da ayɛ wɔ nhyehyɛe ho .

Wɔasi dropdowns wɔ nhomakorabea a ɛto so abiɛsa, Popper , a ɛma gyinabea a ɛyɛ nnam ne viewport detection. Hwɛ sɛ wode popper.min.js bɛka ho ansa na Bootstrap JavaScript no aba anaa fa bootstrap.bundle.min.js/ bootstrap.bundle.jsa Popper wom di dwuma. Popper nnyɛ mfa nsi dropdowns wɔ navbars ɛwom sɛ sɛnea dynamic positioning nhia.

Nneɛma a wotumi nya

WAI ARIA gyinapɛn no kyerɛkyerɛ widget ankasa mu role="menu", nanso eyi yɛ pɔtee ma application-te sɛ menus a ɛkanyan nneyɛe anaa dwumadi ahorow. ARIA menu ahorow no betumi akura menu nneɛma, checkbox menu nneɛma, radio bɔtn menu nneɛma, radio bɔtn akuw, ne menu nketewa nkutoo.

Nanso, wɔayɛ Bootstrap dropdowns no sɛnea ɛbɛyɛ a ɛbɛyɛ nea ɛfa biribiara ho na ɛyɛ adwuma wɔ tebea horow ne agyiraehyɛde nhyehyɛe ahorow mu. Sɛ nhwɛso no, wobetumi ayɛ dropdowns a ɛwɔ inputs foforo ne form controls, te sɛ search fields anaa login forms. Esiane eyi nti, Bootstrap nhwɛ kwan (anaasɛ ɛde bɛka ho ankasa) rolene aria-su ahorow a ɛho hia ma nokware ARIA menu ahorow no mu biara. Ɛsɛ sɛ akyerɛwfo ankasa de saa su ahorow a ɛyɛ pɔtee kɛse yi ka ho.

Nanso, Bootstrap de mmoa a wɔasisi mu ka ho ma keyboard menu nkitahodi dodow no ara a ɛyɛ gyinapɛn, te sɛ tumi a wode bɛfa nneɛma ankorankoro .dropdown-itemmu denam cursor safoa no so na wode safoa no ato menu no mu ESC.

Nhwɛso ahorow

Fa dropdown no toggle (wo button anaa link) ne dropdown menu no kyekyere .dropdown, anaa element foforo a ɛpae mu ka position: relative;. Wobetumi akanyan dropdowns afi <a>anaa <button>elements mu ma ɛne w’ahiade ahorow a ebetumi aba no ahyia yiye. Nhwɛsoɔ a wɔakyerɛ wɔ ha no de semantic <ul>elements di dwuma wɔ baabi a ɛfata, nanso wɔboa custom markup.

Bɔton biako pɛ

.btnWobetumi adan single biara ayɛ no dropdown toggle a markup nsakrae ahorow bi wom. Sɛnea wubetumi de wɔn ayɛ adwuma ne <button>elements abien no mu biara ni:

html na ɛwɔ hɔ 
<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>

Na ɛne <a>element ahorow:

html na ɛwɔ hɔ 
<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>

Ɔfã a eye sen biara ne sɛ wubetumi ayɛ eyi ne button variant biara, nso:

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

Split button no mu

Saa ara nso na yɛ split button dropdowns a ɛkame ayɛ sɛ markup koro no ara sɛ button dropdowns biako, nanso fa ka ho .dropdown-toggle-splitma kwan a ɛfata twa dropdown caret no ho hyia.

Yɛde saa adesua foforo yi di dwuma de tew horizontal paddinga ɛwɔ caret no afã abien no nyinaa so 25% na yɛayi nea margin-leftwɔde aka ho ama daa button dropdowns no. Saa nsakrae afoforo no ma caret no kɔ mfinimfini wɔ split button no mu na ɛma hit area a ne kɛse fata kɛse wɔ button titiriw no nkyɛn.

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

Sizing a wɔde yɛ nneɛma

Button dropdowns ne buttons a ne kɛse nyinaa yɛ adwuma, a default ne split dropdown buttons ka ho.

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

Esum mu nsɛm a ɛtɔ gu fam

Paw kɔ dropdowns a ɛyɛ sum mu ma ɛne navbar a ɛyɛ sum anaa custom style hyia denam nea wode bɛka ho .dropdown-menu-darkwɔ nea ɛwɔ hɔ dedaw .dropdown-menuno so. Ɛho nhia sɛ wɔyɛ nsakrae biara wɔ nneɛma a ɛwɔ ase hɔ no mu.

html na ɛwɔ hɔ 
<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>

Na sɛ wode bedi dwuma wɔ navbar mu a:

html na ɛwɔ hɔ 
<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>

Akwankyerɛ ahorow

RTL

Akwankyerɛ no yɛ ahwehwɛ bere a wode Bootstrap redi dwuma wɔ RTL mu no, ɛkyerɛ .dropstartsɛ ɛbɛda adi wɔ nifa so.

Mfinimfini

Yɛ dropdown menu no mfinimfini wɔ toggle no ase ne .dropdown-centerwɔ ɔwofo element no so.

html na ɛwɔ hɔ 
<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 a ɛwɔ hɔ

Trigger dropdown menus a ɛwɔ element ahorow no atifi denam .dropupawofo element no a wode bɛka ho no so.

<!-- 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 a ɛwɔ mfinimfini

Yɛ dropup menu no mfinimfini wɔ toggle no atifi ne .dropup-centerwɔ ɔwofo element no so.

html na ɛwɔ hɔ 
<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 a ɛwɔ hɔ

Trigger dropdown menus wɔ elements no nifa so denam .dropendawofo element no a wode bɛka ho no so.

<!-- 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 a ɛwɔ hɔ

Trigger dropdown menus wɔ elements no benkum so denam .dropstartawofo element no a wode bɛka ho no so.

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

Wubetumi de <a>anaa <button>elements adi dwuma sɛ nneɛma a ɛwɔ ase.

html na ɛwɔ hɔ 
<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>

Wubetumi nso de .dropdown-item-text. Fa ahofadi de CSS anaa nsɛm a wɔde di dwuma a wɔahyɛ da ayɛ no kyerɛw kɔ akyiri.

html na ɛwɔ hɔ 
<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>

Asɔ

Fa ka .activenneɛma a ɛwɔ dropdown no ho na fa style no sɛ active . Sɛ wopɛ sɛ wode tebea a ɛyɛ adwuma no kɔ mfiridwuma a ɛboa mu a, fa aria-currentsu no di dwuma — fa bo a pageɛsom ma krataafa a ɛwɔ hɔ mprempren no di dwuma, anaasɛ trueade a ɛwɔ hɔ mprempren wɔ nhyehyɛe bi mu.

html na ɛwɔ hɔ 
<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>

Dɛmdie

Fa ka .disablednneɛma a ɛwɔ dropdown no mu ho na fa style no sɛ disabled .

html na ɛwɔ hɔ 
<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>

Sɛnea wɔahyɛ no, wɔde menu a ɛba fam no si hɔ ankasa 100% fi soro ne ne wofo no benkum so. Wubetumi de akwankyerɛ .drop*adesua ahorow no asesa eyi, nanso wubetumi nso de modifier adesua ahorow foforo adi so.

Fa ka .dropdown-menu-enda ho .dropdown-menukɔ nifa so hyɛ dropdown menu no mu. Akwankyerɛ no yɛ ahwehwɛ bere a wode Bootstrap redi dwuma wɔ RTL mu no, ɛkyerɛ .dropdown-menu-endsɛ ɛbɛda adi wɔ benkum so.

Ti a ɛwɔ soro! Dropdowns no wɔ positioned aseda Popper gye sɛ ɛwɔ navbar mu.
html na ɛwɔ hɔ 
<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>

Mmuae a wɔde hyɛ mu

Sɛ wopɛ sɛ wode responsive alignment di dwuma a, ma dynamic positioning no nyɛ adwuma denam data-bs-display="static"attribute no a wode bɛka ho no so na fa responsive variation classes no di dwuma.

Sɛ wopɛ sɛ wode dropdown menu no ne breakpoint a wɔde ama no hyia anaa nea ɛsõ sen saa a, fa ka ho .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html na ɛwɔ hɔ 
<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>

Sɛ wopɛ sɛ wode benkum so menu a ɛwɔ ase no ne breakpoint a wɔde ama no anaa nea ɛsõ sen saa no hyia a, fa ka ho .dropdown-menu-endne .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html na ɛwɔ hɔ 
<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>

Hyɛ no nsow sɛ enhia sɛ wode data-bs-display="static"attribute bi bɛka dropdown buttons ho wɔ navbars mu, efisɛ wɔmfa Popper nni dwuma wɔ navbars mu.

Alignment a wobetumi apaw

Fa dodow no ara a wɔakyerɛ wɔ atifi hɔ no, ɛha na ɛyɛ ketewaa bi adididan mu sink demo a ɛsono dropdown alignment options wɔ beae biako.

html na ɛwɔ hɔ 
<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>

Menu mu nsɛm

Nsɛmti a wɔde kyerɛw nsɛm

Fa asɛmti bi ka ho na fa nkyerɛwde afã horow a ɛfa nneyɛe ho wɔ dropdown menu biara mu.

html na ɛwɔ hɔ 
<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>

Nneɛma a wɔkyekyɛ mu

Fa divider yiyi nneɛma a ɛfa ho a ɛwɔ menu mu no mu akuw mu.

html na ɛwɔ hɔ 
<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>

Atwerɛ

Fa freeform text biara gu dropdown menu a nsɛm wom mu na fa spacing utilities di dwuma . Hyɛ no nsow sɛ ɛda adi sɛ wubehia sizing styles foforo de asiw menu no trɛw ano.

Ebinom nhwɛso nsɛm a ɛyɛ free-flowing wɔ dropdown menu no mu.

Na eyi yɛ nhwɛso nkyerɛwee kɛse.

html na ɛwɔ hɔ 
<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>

Nkyerɛwee ahorow

Fa kratasin bi hyɛ dropdown menu mu, anaa yɛ no dropdown menu, na fa margin anaa padding utilities di dwuma ma no negative space a wopɛ.

Foforo a atwa ha ho ahyia? Kyerɛw wo din Wo werɛ afi wo password?
html na ɛwɔ hɔ 
<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 na ɛwɔ hɔ 
<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>

Fa data-bs-offsetanaa data-bs-referencesesa beae a ɛwɔ dropdown no.

html na ɛwɔ hɔ 
<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>

Auto close suban

Sɛnea wɔahyɛ no, wɔbɛto dropdown menu no mu bere a woabɔ dropdown menu no mu anaa akyi no. Wubetumi de ɔkwan a autoClosewobɛpaw no asesa saa suban yi a ɛwɔ dropdown no mu.

html na ɛwɔ hɔ 
<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 a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren dropdowns de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .dropdown-menuma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no ​​da so ara boa, nso.

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

Wobetumi ahu customization nam CSS variables so wɔ .dropdown-menu-darkclass no so baabi a yɛde values ​​pɔtee bi gu so a yɛmfa CSS selectors a ɛyɛ abien nka ho.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Sass nsakrae ahorow

Nsakraeɛ a ɛwɔ dropdowns nyinaa mu:

$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 ma esum dropdown no : .

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

Nsakraeɛ ma CSS-gyina carets a ɛkyerɛ dropdown no nkitahodiɛ:

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

Nneɛma a wɔde frafra

Wɔde mixins di dwuma de yɛ carets a egyina CSS so no na wobetumi ahu wɔ 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ɛnea wɔde di dwuma

Ɛnam data attributes anaa JavaScript so no, dropdown plugin no dannan nneɛma a ahintaw (dropdown menus) denam .showadesuakuw no a ɛdannan wɔ ɔwofo no .dropdown-menuso . Wɔde data-bs-toggle="dropdown"wɔn ho to su no so de to dropdown menus mu wɔ application level bi so, enti ɛyɛ adwene pa sɛ wode bedi dwuma bere nyinaa.

Wɔ mfiri a wɔde nsa ka so no, sɛ wubue dropdown a, ɛde handlers a hwee nni mu ka element mouseoverno mma a wɔbɛn wɔn pɛɛ no ​​ho. <body>This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , a anka ɛbɛma tap biara a ɛwɔ dropdown no akyi a ɛbɛkanyan code a ɛto dropdown no. Sɛ wɔto dropdown no mu wie a, woyi saa mouseoverhandlers foforo a hwee nni mu yi fi hɔ.

Via data su ahorow so

Fa ka data-bs-toggle="dropdown"link anaa button bi ho na dannan dropdown bi.

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

Ɛdenam JavaScript so

Frɛ nsɛm a ɛwɔ ase hɔ no denam JavaScript so:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
data-bs-toggle="dropdown"wɔda so ara hwehwɛ

Ɛmfa ho sɛ ebia wobɛfrɛ wo dropdown no denam JavaScript so anaasɛ wode data-api no bedi dwuma mmom no, data-bs-toggle="dropdown"ɛhwehwɛ sɛ ɛwɔ hɔ bere nyinaa wɔ dropdown no trigger element no so.

Nneɛma a wubetumi apaw

Sɛnea wobetumi afa data attributes anaa JavaScript so de options no atwam no, wubetumi de option din ahyɛ data-bs-, sɛnea ɛwɔ data-bs-animation="{value}". Hwɛ hu sɛ wobɛsesa case type a ɛwɔ option din no mu afi “ camelCase ” akɔ “ kebab-case ” bere a wode options no nam data attributes so retwam no. Sɛ nhwɛso no, fa di dwuma data-bs-custom-class="beautifier"mmom sen sɛ wode data-bs-customClass="beautifier".

Ɛde besi Bootstrap 5.2.0 no, nneɛma no nyinaa boa nhwehwɛmu a wɔde asie data su data-bs-configa ebetumi de afã nhyehyɛe a ɛnyɛ den ahyɛ mu sɛ JSON ahama. Sɛ element bi wɔ data-bs-config='{"delay":0, "title":123}'ne data-bs-title="456"su ahorow a, botae a etwa to titleno bɛyɛ 456na data su ahorow a ɛtetew mu no bɛbɔ botae ahorow a wɔde ama wɔ data-bs-config. Bio nso, data su ahorow a ɛwɔ hɔ dedaw no tumi de JSON botae ahorow te sɛ data-bs-delay='{"show":0,"hide":150}'.

Din Korɔ Mfiaseɛ Nkyerɛmu
autoClose boolean, ahama true Hyehyɛ auto close suban a ɛwɔ dropdown no mu:
  • true- a woabo no mu no beto mu denam klike a wobekyere no akyi anaase wo mu no so.
  • false- a ewo dropdown no beto mu denam toggle button no a wobekyere so na wode nsa akyere hideanaase togglekwan no so. (Afei nso wɔrento mu denam esckey a wobɛmia so)
  • 'inside'- a ewo dropdown no beto mu (nkutoo) denam klike a ewo dropdown menu no mu no so.
  • 'outside'- a ewo dropdown no beto mu (nkutoo) denam klike a ewo dropdown menu no akyi no so.
ESCHyɛ no nsow: wobetumi de safe no atoto dropdown no mu bere nyinaa .
boundary ahama, element 'clippingParents' Overflow anohyeto hye a ɛwɔ dropdown menu no mu (ɛfa Popper preventOverflow modifier no nkutoo ho). Sɛnea wɔahyɛ no ɛyɛ clippingParentsna ebetumi agye HTMLElement nkyerɛkyerɛmu (ɛnam JavaScript nkutoo so). Sɛ wopɛ nsɛm pii a hwɛ Popper detectOverflow docs .
display ahoma 'dynamic' Sɛnea wɔahyɛ no, yɛde Popper di dwuma ma gyinabea a ɛyɛ nnam. Ma eyi nyɛ adwuma wɔ static.
offset array, ahama, dwumadie [0, 2] Offset a ɛfa dropdown no ho a ɛfa ne botae ho. Wubetumi de ahama bi akɔ data su ahorow mu a ɛwɔ botae ahorow a wɔatew mu wɔ koma mu te sɛ: data-bs-offset="10,20". Sɛ wɔde dwumadie bi di dwuma de kyerɛ offset no a, wɔde adeɛ bi a ɛwɔ popper placement, reference, ne popper rects sɛ ne argument a ɛdi kan no frɛ no. Wɔde triggering element DOM node no twam sɛ akyinnyegye a ɛto so abien. Ɛsɛ sɛ dwumadie no san de array a ɛwɔ nɔma mmienu ba: skidding , distance . Sɛ wopɛ nsɛm pii a hwɛ Popper's offset docs .
popperConfig null, ade, dwumadie null Sɛ wopɛ sɛ wosakra Bootstrap no Popper nhyehyɛe a ɛwɔ hɔ dedaw no a, hwɛ Popper nhyehyɛe . Sɛ wɔde dwumadie bi di dwuma de yɛ Popper nhyehyeɛ no a, wɔde adeɛ bi a ɛwɔ Bootstrap no Popper nhyehyeɛ a ɛwɔ hɔ dedaw no frɛ no. Ɛboa wo ma wode default no di dwuma na wode bom ne w’ankasa nhyehyɛe. Ɛsɛ sɛ dwumadie no san de nhyehyɛɛ adeɛ bi ba ma Popper.
reference ahama, element, ade 'toggle' Nkyerɛkyerɛmu element a ɛwɔ dropdown menu no mu. Gye 'toggle', 'parent', HTMLElement nkyerɛkyerɛmu anaa ade a ɛde ma no botae ahorow tom getBoundingClientRect. Sɛ wopɛ nsɛm pii a hwɛ Popper's constructor docs ne virtual element docs .

Dwumadi a wɔde di dwuma nepopperConfig 

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

Akwan a wɔfa so yɛ

Ɔkwan Nkyerɛmu
dispose Ɔsɛe element bi a ɛwɔ dropdown no. (Eyi data a wɔde asie wɔ DOM element no so)
getInstance Static kwan a ɛma wo kwan ma wonya dropdown instance a ɛbata DOM element bi ho no, wubetumi de adi dwuma sɛnea eyi te: bootstrap.Dropdown.getInstance(element).
getOrCreateInstance Static kwan a ɛsan de dropdown instance a ɛbata DOM element bi ho anaasɛ ɛbɔ foforo sɛ ɛba sɛ wɔanhyɛ aseɛ a. Wubetumi de adi dwuma sɛnea eyi te: bootstrap.Dropdown.getOrCreateInstance(element).
hide Hide dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu.
show Kyerɛ dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu.
toggle Toggles dropdown menu a ɛwɔ navbar anaa tabbed navigation a wɔde ama no mu.
update Ɔyɛ element bi a ɛwɔ dropdown no gyinabea foforo.

Nsɛm a esisi

Wɔde dropdown nsɛm a esisi nyinaa tow toggling element no so na afei wɔde bubbled up. Enti wubetumi nso de event listeners aka ho wɔ .dropdown-menu's parent element no so. hide.bs.dropdownna hidden.bs.dropdownnsɛm a esisi no wɔ clickEventagyapade (bere a Event type a edi kan no yɛ click) a ɛwɔ Event Object ma click event no nkutoo.

Adeyɛ no su Nkyerɛmu
hide.bs.dropdown Ogya ntɛm ara bere a hidewɔafrɛ instance kwan no.
hidden.bs.dropdown Fired bere a dropdown no awie sɛ wɔde asie afiri ɔdefoɔ no na CSS nsakraeɛ no awie.
show.bs.dropdown Ogya ntɛm ara bere a showwɔfrɛ instance kwan no.
shown.bs.dropdown Wɔtow no bere a wɔayɛ dropdown no ahu nea ɔde di dwuma no na CSS nsakrae ahorow no awie. 
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})