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.

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.js , 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.js wom no di dwuma. Popper.js nnyɛ mfa nsi dropdowns wɔ navbars ɛwom sɛ sɛ dynamic positioning nhia.

Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .

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.

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:

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

Na ɛne <a>element ahorow:

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

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

Ɔ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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Akwankyerɛ ahorow

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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

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

Dropright a ɛwɔ hɔ

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

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

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

Nsu a ɛtɔ gu fam

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

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

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

Abakɔsɛm mu no na ɛsɛ sɛ dropdown menu mu nsɛm yɛ links, nanso ɛnyɛ saa bio wɔ v4 ho. Afei wobɛtumi de <button>elements adi dwuma wɔ wo dropdowns no mu sen sɛ wode <a>s kɛkɛ bedi dwuma.

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

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.

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

Asɔ

Fa ka .activenneɛma a ɛwɔ dropdown no ho na fa style no sɛ active .

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

Dɛmdie

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

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

Sɛnea wɔahyɛ no, wɔde menu a ɛba fam no si hɔ ankasa 100% fi soro ne ne wofo no benkum so. Fa ka .dropdown-menu-righta ho .dropdown-menukɔ nifa so hyɛ dropdown menu no mu.

Ti a ɛwɔ soro! Dropdowns no wɔ gyinabea aseda Popper.js (gye sɛ bere a ɛwɔ navbar mu).

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

Mmuae a wɔde hyɛ mu

Sɛ wopɛ sɛ wode responsive alignment di dwuma a, ma dynamic positioning no nyɛ adwuma denam data-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}-right.

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

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-rightne .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

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

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.

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

Nneɛma a wɔkyekyɛ mu

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

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

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.

<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ɛ.

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

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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

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

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 ɛsakra wɔ ɔwofo list ade no so. Wɔde data-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.

On touch-enabled devices, opening a dropdown adds empty ($.noop) mouseover handlers to the immediate children of the <body> element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty mouseover handlers are removed.

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

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

Via JavaScript

Call the dropdowns via JavaScript:

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

`data-toggle="dropdown"` still required

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown’s trigger element.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name	Type	Default	Description
offset	number \| string \| function	0	Offset of the dropdown relative to its target. For more information refer to Popper.js's offset docs.
flip	boolean	true	Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.
boundary	string \| element	'scrollParent'	Overflow constraint boundary of the dropdown menu. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
reference	string \| element	'toggle'	Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs.
display	string	'dynamic'	By default, we use Popper.js for dynamic positioning. Disable this with `static`.

Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.

Methods

Method	Description
`$().dropdown('toggle')`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('show')`	Shows the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('hide')`	Hides the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('update')`	Updates the position of an element’s dropdown.
`$().dropdown('dispose')`	Destroys an element’s dropdown.

Events

Wɔde dropdown nsɛm a esisi nyinaa tow wɔ .dropdown-menu's awofo element no so na ɛwɔ relatedTargetagyapade, a ne bo yɛ toggling anchor element. hide.bs.dropdownna hidden.bs.dropdownnsɛm a esisi no wɔ clickEventagyapade (bere a mfitiase adeyɛ no su no nkutoo yɛ click) a ɛwɔ Event Object ma click event no.

Dwumadie	Nkyerɛmu
`show.bs.dropdown`	Saa adeyɛ yi tow ntɛm ara bere a wɔfrɛ show instance kwan no.
`shown.bs.dropdown`	Wɔtow saa adeyɛ yi bere a wɔayɛ dropdown no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow, awie).
`hide.bs.dropdown`	Wɔtow saa adeyɛ yi ntɛm ara bere a wɔafrɛ hide instance kwan no.
`hidden.bs.dropdown`	Wɔtow saa adeyɛ yi bere a wɔawie dropdown no a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow, awie).

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

Nneɛma a wɔde gu fam

Nsɛm a Wɔaka abom

Nneɛma a wotumi nya

Nhwɛso ahorow

Bɔton biako pɛ

Split button no mu

Sizing a wɔde yɛ nneɛma

Akwankyerɛ ahorow

Dropup a ɛwɔ hɔ

Dropright a ɛwɔ hɔ

Nsu a ɛtɔ gu fam

Menu mu nneɛma

Asɔ

Dɛmdie

Menu a wɔde hyɛ mu

Mmuae a wɔde hyɛ mu

Menu mu nsɛm

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

Nneɛma a wɔkyekyɛ mu

Atwerɛ

Nkyerɛwee ahorow

Sɛnea wɔde di dwuma

Via data attributes

Via JavaScript

`data-toggle="dropdown"` still required

Options

Methods

Events

Nneɛma a wɔde gu fam

Nsɛm a Wɔaka abom

Nneɛma a wotumi nya

Nhwɛso ahorow

Bɔton biako pɛ

Split button no mu

Sizing a wɔde yɛ nneɛma

Akwankyerɛ ahorow

Dropup a ɛwɔ hɔ

Dropright a ɛwɔ hɔ

Nsu a ɛtɔ gu fam

Menu mu nneɛma

Asɔ

Dɛmdie

Menu a wɔde hyɛ mu

Mmuae a wɔde hyɛ mu

Menu mu nsɛm

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

Dropdown asɛmti no

Nneɛma a wɔkyekyɛ mu

Atwerɛ

Nkyerɛwee ahorow

Nneɛma a wobetumi apaw wɔ dropdown so

Sɛnea wɔde di dwuma

Via data attributes

Via JavaScript

data-toggle="dropdown" still required

Options

Methods

Events

`data-toggle="dropdown"` still required