Main content ah kal rawh Docs navigation ah kal rawh
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 atan contextual overlay a awm bawk. 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 :

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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:

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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 hmang hian paddingcaret 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-in 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.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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:

<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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.

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>

Dropright 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">
    Dropright
  </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 Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropleft tih 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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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.

<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 atana value hmangin, emaw, trueset-a item awm mek atan emaw.

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

<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. 
<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 dah belhin 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.

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

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

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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 hrang hrangte label turin header dah la.

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

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

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

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

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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 .

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

Sass a ni

Variables te pawh a awm

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:             rgba($black, .15);
$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:           $dropdown-padding-y $dropdown-item-padding-x;

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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScript hmangin

JavaScript hmangin dropdown te chu call la:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return 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 hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-bs-, data-bs-offset="". Data attribute hmanga options pass dawnin option hming case type chu camelCase atanga kebab-case ah thlak ngei ngei tur a ni. Entirnan, , hmang data-bs-autoClose="false"lovin data-bs-auto-close="false".

Hming Lampang Hlawhchhamna Hrilhfiahna
boundary string | thil bul 'clippingParents' Dropdown menu-a overflow constraint boundary (Popper-a preventOverflow modifier-ah chauh hman tur a ni). Default-ah chuan 'clippingParents'HTMLElement reference a ni a, a pawm thei bawk (JavaScript hmang chauh). Hriat belh duh chuan Popper-a detectOverflow docs en rawh.
reference string | element | thil '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 .
display hrui 'dynamic' Default-ah chuan Popper hi dynamic positioning atan kan hmang thin. Hei hi disable staticrawh .
offset array | string | thiltih [0, 2]

A target nena khaikhin chuan dropdown offset. Data attribute-ah hian comma separated value hmangin string i pass thei ang: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.
autoClose boolean a ni | hrui 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 chu dropdown menu chhunga click-in a khar (only) ang.
  • 'outside'- dropdown chu dropdown menu pawn lama click-in a khar (only) ang.
popperConfig null | thil awmze nei | thiltih 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.

Function hman dan nenpopperConfig

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

Thiltih dan tur

Tihdan Hrilhfiahna
toggle Navbar emaw tabbed navigation pek tawh dropdown menu chu a toggle thin.
show Navbar emaw tabbed navigation pek tawh dropdown menu a entir.
hide Navbar emaw tabbed navigation pek tawh dropdown menu chu a thup thin.
update Element pakhat dropdown awmna hmun a update thin.
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)

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.

Tihdan Hrilhfiahna
show.bs.dropdown Show instance 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.
hide.bs.dropdown Hide instance 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. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})