Main content ah kal rawh Docs navigation ah kal rawh
Check
in English

Dropdown te pawh a awm

Bootstrap dropdown plugin hmangin link list leh a dangte tarlanna tur contextual overlays te chu toggle rawh.

He page ah hian

A tlangpuiin

Dropdown hi toggleable a ni a, link list leh thil dang tam tak tarlanna tur contextual overlay a ni. Anni chu Bootstrap dropdown JavaScript plugin dah tel hmangin interactive taka siam an ni. Anni chu click hmanga toggle an ni a, hovering hmanga toggle an ni lo; hei hi tumruh taka design chungchanga thutlukna siam a ni .

Dropdown hi third party library, Popper -ah siam a ni a , hei hian dynamic positioning leh viewport detection a pe a ni. Bootstrap-a JavaScript hmain popper.min.js kha dah hmasa phawt la, Popper awmna bootstrap.bundle.min.js/ hmang bawk ang che. bootstrap.bundle.jsPopper hi navbar-a dropdown position nan hman a ni lo nain dynamic positioning a ngai lo.

A thlen theihna tur

WAI ARIA standard hian actual widget a define a , role="menu"mahse hei hi application ang chi menus te tan bik a ni a, chu chuan action emaw function emaw a tichhuak thin. ARIA menu-ah hian menu item, checkbox menu item, radio button menu item, radio button group, leh sub-menu te chauh a awm thei.

Bootstrap-a dropdown te erawh chu generic leh situation hrang hrang leh markup structure hrang hranga hman theih tura siam a ni thung. Entirnan, input leh form control dang awmna dropdown siam theih a ni a, chu chu search field emaw login form emaw a ni. Hemi avang hian Bootstrap hian ARIA menu dik tak atana mamawh roleleh aria-attribute pakhat mah a beisei lo (a nih loh leh automatic a add lo bawk). Lehkhabu ziaktute chuan heng attribute chiang zawkte hi anmahni ngeiin an dah tel a ngai dawn a ni.

Mahse, Bootstrap hian standard keyboard menu interaction tam zawkah chuan built-in support a dah belh a, chu .dropdown-itemchu cursor key hmanga element hrang hrang kal tlanga kal theihna leh key hmanga menu khar theihna te ESChi a ni.

Entirna te

Dropdown-a toggle (i button emaw link emaw) leh dropdown menu chu .dropdown, emaw , declare element dang emaw chhungah wrap rawh position: relative;. Dropdowns chu i mamawh theihna tur ang zawka siam turin <a>emaw elements atang emaw atanga trigger theih a ni. <button>Heta entirnan kan tarlan te hian a <ul>remchan dan angin semantic element an hmang a, mahse custom markup erawh a support thung.

Button pakhat chauh a awm

Single eng pawh .btnhi dropdown toggle-ah a chantir thei a, markup thlak danglamna engemaw zat a awm bawk. <button>Hetah hian element pahnih emaw hmanga hnathawh tir theih dan tur chu hetiang hi a ni :

html tih a ni 
<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>

Tin, <a>elements te nen pawh:

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

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

A tha ber chu button variant eng pawh hmangin hetiang hian i ti thei bawk:

<!-- 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 a awm bawk

Chutiang bawkin, split button dropdown siam la, button pakhat dropdown ang chiah markup nen siam la, mahse .dropdown-toggle-splitdropdown caret chhehvela space dik tak neih theih nan tih belh rawh.

He extra class hi kan hmang a padding, caret sir lehlama horizontal chu 25% in kan tihhniam a, margin-leftregular button dropdown-a that’s added chu kan paih chhuak bawk. Chutiang extra changes chuan caret chu split button-ah centered-ah a dah a, main button bulah hit area size tling zawk a pe bawk.

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

Button dropdown hian button size hrang hrang hmangin hna a thawk a, default leh split dropdown button te pawh a awm bawk.

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

Dark dropdown a awm bawk

Dark dropdowns ah opt la, dark navbar emaw custom style emaw nena inmil turin .dropdown-menu-darkexisting ah dah la .dropdown-menu. Dropdown items ah hian tihdanglam a ngai lo.

html tih a ni 
<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>

Tin, navbar-a hman tur dahin:

html tih a ni 
<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>

Kawng zawh dan tur

RTL a ni

RTL-a Bootstrap hman hian directions a mirror a, awmzia .dropstartchu dinglamah a lang ang.

Center-ah a awm

Dropdown menu .dropdown-centerchu parent element-a toggle hnuaiah center-ah siam rawh.

html tih a ni 
<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 ni

.dropupElement chunga dropdown menu te chu parent element ah dahin trigger rawh.

<!-- 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 center a ni

Dropup menu .dropup-centerchu parent element chungah toggle chung lamah centered turin siam rawh.

html tih a ni 
<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 ni

.dropendElement dinglama dropdown menu te chu parent element ah dahin trigger rawh.

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

.dropstartElement veilam a dropdown menu te chu parent element ah dahin trigger rawh.

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

Dropdown item atan <a>or elements i hmang thei bawk.<button>

html tih a ni 
<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>

Tin, non-interactive dropdown item pawh i siam thei bawk .dropdown-item-text. Custom CSS emaw text utilities emaw hmangin style belh zel turin zalen takin awm rawh.

html tih a ni 
<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>

Harhvang

.activeDropdown a thil awmte chu active anga style turin add rawh . Active state chu assistive technology-te hnena thlen tur chuan aria-currentattribute hmang la — pagetuna page awm mek atana value hmangin, emaw, trueset-a item awm mek atan emaw hmang rawh.

html tih a ni 
<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>

Ramtuileilo

.disabledDropdown a thil awmte chu disabled anga style turin add rawh .

html tih a ni 
<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>

Default-ah chuan dropdown menu chu a chung atanga 100% in a parent veilam sir lamah a awm nghal vek a ni. Hei hi directional .drop*class hmangin i thlak thei a, mahse modifier class dang hmangin i control thei bawk.

Dropdown menu chu .dropdown-menu-enda atanga dinglam hawiin add rawh . .dropdown-menuRTL-a Bootstrap hman hian directions a mirror a, awmzia .dropdown-menu-endchu veilam sir ah a lang ang.

Lu a ti sang a! Dropdown te hi navbar-a dah a nih loh chuan Popper vangin an position a ni.
html tih a ni 
<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>

Chhanna pe thei tur alignment

Responsive alignment hman i duh chuan attribute dahin dynamic positioning kha disable la data-bs-display="static", responsive variation class te hmang rawh.

Dropdown menu chu breakpoint pek emaw a aia lian emaw nena dinglama align tur chuan .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html tih a ni 
<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>

Dropdown menu veilam chu breakpoint pek emaw a aia lian emaw nena align tur chuan add .dropdown-menu-endleh .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html tih a ni 
<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>

Navbar-a dropdown button-ah hian attribute dah a ngai lo tih hre reng ang che data-bs-display="static", Popper hi navbar-ah hman a nih loh avangin.

Alignment tih theih a ni

A chunga kan tarlan option tam zawk hi la ila, hetah hian hmun khata dropdown alignment option hrang hrang awmna kitchen sink demo te tak te kan rawn tarlang e.

html tih a ni 
<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 chhunga thu awmte

Headers te pawh a awm

Dropdown menu eng pawha action section label turin header dah la.

html tih a ni 
<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>

Insem darhtute

Menu item inzawm group hrang hrangte chu divider hmangin then hran rawh.

html tih a ni 
<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>

Thumal

Freeform text eng pawh chu dropdown menu chhungah text awmnaah dah la , spacing utilities hmang rawh . Menu zau zawng tihtlem nan sizing style dang i mamawh mai thei tih hre reng ang che.

Dropdown menu chhunga free-flowing text entirnan thenkhat.

Tin, hei hi entirnan text a ni zawk.

html tih a ni 
<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>

Form hrang hrang

Dropdown menu chhungah form dah la, a nih loh leh dropdown menu-ah siam la, margin emaw padding utilities emaw hmangin i mamawh negative space pe rawh.

Hetah hian thil thar thar? Sign up rawh Password i theihnghilh em?
html tih a ni 
<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 tih a ni 
<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>

Dropdown awmna hmun thlak tur chuan data-bs-offsetor hmang ang che .data-bs-reference

html tih a ni 
<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 tih dan tur

Default-ah chuan dropdown menu chhung emaw pawn emaw i click chuan dropdown menu chu a khar vek a ni. autoCloseDropdown-a he behavior hi i thlak danglam theih nan option hi i hmang thei ang .

html tih a ni 
<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 ni

Variables te pawh a awm

v5.2.0 ah dah belh a ni

Bootstrap-in CSS variables approach a kalpui mek zingah hian dropdown-ah chuan local CSS variables on hmangin .dropdown-menureal-time customization tihchangtlun a ni tawh. CSS variable hrang hrangte tana value te hi Sass hmanga set a nih avangin Sass customization pawh a la support reng bawk.

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

CSS variable hmanga customization chu .dropdown-menu-darkCSS selector duplicate dah tel lovin value bik kan override na class-ah kan hmu thei.

  --#{$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 a danglam thei

Dropdown zawng zawng atana variable awmte:

$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

Dark dropdown atan hian variable hrang hrang : 1.1.

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

CSS-based caret-te tana variable hrang hrang, dropdown pakhata inzawmna (interactivity) tilangtu:

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

Mixins te a awm

Mixins hi CSS hmanga carets siam nan hman a ni 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;
    }
  }
}

Hman dan tur

Data attribute emaw JavaScript hmangin dropdown plugin hian thup (dropdown menu) te .showchu parent-a class toggling hmangin a toggle .dropdown-menuthin Attribute hi data-bs-toggle="dropdown"application level-a dropdown menu khar nan rintlak a nih avangin hman reng a tha.

Touch-enabled device-ah chuan dropdown hawn hian element mouseoverfate hnaih berte hnenah handler empty a belhchhah a ni. <body>This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , chutiang a nih loh chuan dropdown pawn lam hmun dangah tap chuan dropdown khartu code a tichhuak thei lo ang. Dropdown khar a nih veleh heng mouseoverhandler empty additional te hi an paih chhuak thin.

Data attribute hmangin a ni

data-bs-toggle="dropdown"Link emaw button emaw ah dah la , dropdown toggle rawh.

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

JavaScript hmangin

JavaScript hmangin dropdown te chu call la:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
data-bs-toggle="dropdown"a la mamawh reng a ni

JavaScript hmanga i dropdown i call emaw, a aiah data-api hmang emaw pawh nise, data-bs-toggle="dropdown"dropdown-a trigger element-ah hian awm reng a ngai a ni.

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmanga pass theih a nih avangin option hming chu data-bs-, ah hian i append thei ang data-bs-animation="{value}". Data attribute hmanga options pass dawnin option hming case type chu “ camelCase ” atanga “ kebab-case ” ah thlak ngei ngei tur a ni. Entirnan, data-bs-custom-class="beautifier"tih aiah hmang data-bs-customClass="beautifier"rawh.

Bootstrap 5.2.0 atang khan component zawng zawng hian experimental reserved data attribute an support data-bs-configa, chu chuan JSON string angin component configuration awlsam tak a dah thei a ni. Element pakhatin data-bs-config='{"delay":0, "title":123}'leh data-bs-title="456"attribute a neih chuan a tawp ber titlevalue chu a ni ang a 456, data attribute hrang hrangte chuan , a value pekte chu a override ang data-bs-config. Chu bakah, data attribute awmsa te hian JSON value te chu data-bs-delay='{"show":0,"hide":150}'.

Hming Lampang Hlawhchhamna Hrilhfiahna
autoClose boolean, string tih a ni true Dropdown-a auto close behavior chu configure rawh:
  • true- dropdown chu dropdown menu pawn emaw a chhungah emaw click la, a khar ang.
  • false- dropdown chu toggle button click la, manually call hideemaw togglemethod emaw hmangin a khar ang. esc(Tin, key hmet chuan a khar dawn lo bawk )
  • 'inside'- dropdown menu chhungah click la, dropdown chu a khar (only) ang.
  • 'outside'- dropdown chu dropdown menu pawn lama click-in a khar (only) ang.
ESCNote: dropdown chu key hmangin khar theih reng a ni .
boundary string, element tih a ni 'clippingParents' Dropdown menu-a overflow constraint boundary (Popper-a preventOverflow modifier-ah chauh hman tur a ni). Default-ah chuan clippingParentsHTMLElement reference a ni a, a pawm thei bawk (JavaScript hmang chauh). Hriat belh duh chuan Popper-a detectOverflow docs en rawh.
display hrui 'dynamic' Default-ah chuan Popper hi dynamic positioning atan kan hmang thin. Hei hi disable staticrawh .
offset array, string, hnathawh dan te [0, 2] A target nena khaikhin chuan dropdown offset. Data attribute-ah string pakhat chu comma separated value hmangin i pass thei a, chu chu: data-bs-offset="10,20". Offset hriat nan function hman a nih chuan a argument hmasa ber atan popper placement, reference leh popper rects te awmna object hmangin koh a ni. Triggering element DOM node chu argument pahnihna atan pass a ni. Function hian number pahnih nei array a rawn pe chhuak tur a ni: skidding , distance . Hriat belh duh chuan Popper-a offset docs en rawh.
popperConfig null, thil, hnathawh null Bootstrap-a Popper config default thlak tur chuan Popper-a configuration en rawh . Popper configuration siamna atana function hman a nih chuan Bootstrap-a default Popper configuration awmna object hmangin koh a ni. Default chu i configuration nen hman leh merge turin a pui che a ni. Function hian Popper tan configuration object a rawn pe chhuak tur a ni.
reference string, element, thil awm zawng zawng 'toggle' Dropdown menu a reference element chu a rawn lang ang. 'toggle', 'parent', HTMLElement reference emaw object pe chhuaktu value te a pawm getBoundingClientRect. Hriat belh duh chuan Popper-a constructor docs leh virtual element docs te hi en la .

Function hman dan nenpopperConfig 

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

Thiltih dan tur

Tihdan Hrilhfiahna
dispose Element pakhat dropdown a tichhia. (DOM element-a data dahkhawmte a paih chhuak)
getInstance Static method hmanga DOM element nena inzawm dropdown instance hmuh theihna tur, hetiang hian i hmang thei ang: bootstrap.Dropdown.getInstance(element).
getOrCreateInstance Static method chu DOM element nena inzawm dropdown instance rawn pe chhuak emaw, initialized a nih loh chuan a thar siam emaw a ni. Hetiang hian i hmang thei ang: bootstrap.Dropdown.getOrCreateInstance(element).
hide Navbar emaw tabbed navigation pek tawh dropdown menu chu a thup thin.
show Navbar emaw tabbed navigation pek tawh dropdown menu a entir.
toggle Navbar emaw tabbed navigation pek tawh dropdown menu chu a toggle thin.
update Element pakhat dropdown awmna hmun a update thin.

Thil thlengte

Dropdown event zawng zawng chu toggling element ah fire vek a ni a, chutah chuan bubble up vek a ni. .dropdown-menuChuvangin 's parent element ah event listeners pawh i dah thei bawk . hide.bs.dropdownleh hidden.bs.dropdownevents te hian clickEventproperty an nei a (original Event type chu click) a nih chuan click event atan Event Object a awm a ni.

Event chi hrang hrang Hrilhfiahna
hide.bs.dropdown hideInstance method a koh zawh chuan a kang nghal vek .
hidden.bs.dropdown User hnen atanga dropdown hidden a nih zawh a, CSS transition te a zawh chuan Fired a ni.
show.bs.dropdown showInstance method a koh chuan a kang nghal vek .
shown.bs.dropdown Dropdown chu user hmuh theiha siam a nih a, CSS transition a zawh tawh chuan fired a ni. 
const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})