Dagiti dropdown

I-toggle dagiti konteksto a panagikapet para iti panangiparang kadagiti listaan dagiti silpo ken dadduma pay babaen ti Bootstrap dropdown plugin.

Iti daytoy a panid

Panangkita iti pakabuklan

Dagiti dropdown ket mabalin a mabaliwan, dagiti konteksto a panagikapet para iti panangiparang kadagiti listaan dagiti silpo ken dadduma pay. Naaramid dagitoy nga interaktibo babaen ti nairaman a Bootstrap dropdown JavaScript plugin. Ma-toggle dagitoy babaen ti panag-click, saan a babaen ti panag-hover; daytoy ket nairanta a pangngeddeng iti disenio .

Dagiti dropdown ket naibangon iti maysa a maikatlo a partido a biblioteka, ti Popper , a mangipaay ti dinamiko a panagposision ken panagduktal ti viewport. Siguraduen nga iraman ti popper.min.js sakbay ti JavaScript ti Bootstrap wenno usaren ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper. Ti Popper ket saan a naus-usar a mangiposision kadagiti dropdown kadagiti navbar nupay kasta a kas ti dinamiko a panagposision ket saan a kasapulan.

Ti pannakagun-od

Ti pagalagadan ti WAI ARIA ket mangikeddeng ti aktual a role="menu"widget , ngem daytoy ket espesipiko kadagiti kasla aplikasion a menu a mangtignay kadagiti panagtignay wenno dagiti panagandar. Dagiti menu ti ARIA ket mabalin laeng nga aglaon kadagiti banag ti menu, dagiti banag ti menu ti kahon ti tsek, dagiti banag ti menu ti buton ti radio, dagiti grupo ti buton ti radio, ken dagiti sub-menu.

Iti sabali a bangir, dagiti dropdown ti Bootstrap ket nadisenio a sapasap ken maipakat kadagiti nadumaduma a kasasaad ken dagiti estruktura ti markup. Kas pagarigan, mabalin ti mangpartuat kadagiti dropdown a naglaon kadagiti kanayonan nga input ken dagiti kontrol ti porma, a kas dagiti tay-ak ti panagbiruk wenno dagiti porma ti panagserrek. Gapu iti daytoy a rason, ti Bootstrap ket saan a mangnamnama (wenno automatiko a manginayon) ti ania man kadagiti roleken dagiti aria-kababalin a kasapulan para kadagiti pudno nga ARIA a menu. Masapul nga iraman dagiti autor dagitoy nga ad-adda nga espesipiko a kababalin a mismo.

Nupay kasta, ti Bootstrap ket mangnayon ti naibangon a suporta para kadagiti kaaduan a pagalagadan a panagtitinnulong ti menu ti teklado, a kas ti abilidad nga aggaraw kadagiti indibidual .dropdown-itemnga elemento babaen ti panagusar kadagiti tulbek ti kursor ken mangiserra ti menu babaen ti ESCtulbek.

Dagiti pagarigan

Balkoten ti toggle ti dropdown (ti buton wenno silpomo) ken ti dropdown menu iti uneg ti .dropdown, wenno sabali nga elemento a mangideklara position: relative;iti . Mabalin a mai-trigger dagiti dropdown manipud <a>wenno <button>dagiti elemento tapno nasaysayaat a maibagay kadagiti mabalin a kasapulam. Dagiti pagarigan a naipakita ditoy ket agus-usar kadagiti semantiko <ul>nga elemento no sadino a maitutop, ngem ti kostumbre a panagmarka ket nasuportaran.

Maymaysa a buton

Ania man a single .btnket mabalin a pagbalinen a dropdown toggle nga addaan kadagiti sumagmamano a panagbalbaliw ti markup. Adtoy no kasano a maikabilmo dagitoy nga agtrabaho kadagiti asinoman <button>nga elemento:

html nga

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

Ket addaan kadagiti <a>elemento:

html nga

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

Ti kasayaatan a paset ket mabalinmo nga aramiden daytoy iti ania man a buton a variant, met:

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

Kasta met, mangpartuat kadagiti nabingay a buton a dropdown nga addaan iti gangani a kapada a marka a kas dagiti agmaymaysa a buton a dropdown, ngem addaan ti pannakainayon ti .dropdown-toggle-splitpara iti umno a panagsisina iti aglawlaw ti dropdown a caret.

Usarenmi daytoy nga ekstra a klase tapno mapabassit ti horizontal paddingiti agsumbangir a sikigan ti caret iti 25% ken ikkaten ti margin-leftthat's added para kadagiti regular a button dropdown. Dagita nga ekstra a panagbalbaliw pagtalinaedenda a naisentro ti caret iti split button ken mangipaay iti ad-adda a maitutop ti kadakkelna a lugar a maidungpar iti abay ti kangrunaan a buton.

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

Panag-sizing

Dagiti buton a dropdown ket agtrabaho kadagiti buton ti amin a kadakkel, a mairaman dagiti default ken split a dropdown a buton.

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

Nasipnget dagiti dropdown

Pilien kadagiti nasipnget a dropdown tapno maipada ti nasipnget a navbar wenno kostumbre nga estilo babaen ti pananginayon .dropdown-menu-darkiti addan .dropdown-menu. Awan ti kasapulan a panagbalbaliw kadagiti dropdown a banag.

html nga

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

Ket ti panangikabil iti dayta nga usaren iti navbar:

html nga

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

Dagiti Direksion

RTL nga

Dagiti direksion ket maisarming no agus-usar ti Bootstrap iti RTL, kayatna a sawen .dropstartket agparangto iti kannawan a sikigan.

Naisentro

Aramiden ti dropdown menu a naisentro iti baba ti toggle with .dropdown-centeriti nagannak nga elemento.

html nga

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

Mangtignay kadagiti dropdown a menu iti ngato dagiti elemento babaen ti pananginayon .dropupiti nagannak nga elemento.

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

Aramiden ti dropup menu a naisentro iti ngato ti toggle with .dropup-centeriti nagannak nga elemento.

html nga

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

Mangtignay kadagiti dropdown a menu iti kannawan dagiti elemento babaen ti pananginayon .dropenditi nagannak nga elemento.

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

Panag-dropstart

Mangtignay kadagiti dropdown a menu iti kannigid dagiti elemento babaen ti pananginayon .dropstartiti nagannak nga elemento.

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

Mabalinmo nga usaren <a>wenno <button>dagiti elemento a kas dagiti dropdown a banag.

html nga

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

Mabalinmo pay ti mangpartuat kadagiti saan nga interaktibo a dropdown a banag babaen ti .dropdown-item-text. Mariknam a nawaya nga estilo nga ad-adda pay babaen dagiti kostumbre a CSS wenno dagiti utilidad ti teksto.

html nga

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

Aktibo

Inayon .activekadagiti banag iti dropdown tapno estilo dagitoy a kas aktibo . Tapno maidanon ti aktibo a kasasaad kadagiti makatulong a teknolohia, usaren ti aria-currentattribute — nga agus-usar ti pagepateg para iti agdama a panid, wenno truepara iti agdama a banag iti maysa a grupo.

html nga

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

Awanan ti kabaelan

Inayon .disabledkadagiti banag iti dropdown tapno estilo dagitoy a kas baldado .

html nga

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

Babaen ti default, ti maysa a dropdown a menu ket automatiko a naiposision iti 100% manipud iti ngato ken iti kannigid a sikigan ti nagannakna. Mabalinmo a baliwan daytoy babaen dagiti .drop*klase ti direksion, ngem mabalinmo pay a kontrolen dagitoy babaen dagiti kanayonan a klase ti mangbalbaliw.

Inayon .dropdown-menu-enditi a .dropdown-menuagingga iti kannawan nga i-align ti dropdown menu. Dagiti direksion ket maisarming no agus-usar ti Bootstrap iti RTL, kayatna a sawen .dropdown-menu-endket agparangto iti kannigid a sikigan.

Ulo nga agpangato! Dagiti dropdown ket naiposision gapu iti Popper malaksid no linaon dagitoy iti maysa a navbar.

html nga

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

Responsibo a panagtunos

No kayatmo nga usaren ti sumungbat a panagtunos, balbaliwan ti dinamiko a panagposision babaen ti pananginayon ti data-bs-display="static"attribute ken usarem dagiti sungbat a klase ti panagduduma.

Tapno maitunos iti kannawan ti dropdown menu iti naited a breakpoint wenno dakdakkel, inayon ti .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html nga

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

Tapno maitunos ti kannigid a dropdown menu iti naited a breakpoint wenno dakdakkel, inayon .dropdown-menu-endken .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html nga

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

Imutektekanyo a saanmo a kasapulan ti manginayon ti data-bs-display="static"attribute kadagiti dropdown a buton kadagiti navbar, gapu ta ti Popper ket saan a maus-usar kadagiti navbar.

Dagiti pagpilian iti panagtunos

Ti panangala ti kaaduan kadagiti pagpilian a naipakita iti ngato, ditoy ti bassit a demo ti lababo ti kosina dagiti nadumaduma a pagpilian ti dropdown alignment iti maysa a lugar.

html nga

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

Dagiti ulo

Manginayon ti ulo a mangimarka kadagiti benneg dagiti tignay iti ania man a dropdown a menu.

html nga

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

Dagiti Mangbingaybingay

Pagsisinaen dagiti grupo dagiti mainaig a banag ti menu babaen ti divider.

html nga

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

Teksto

Ikabil ti ania man a nawaya a porma a teksto iti uneg ti dropdown a menu nga addaan iti teksto ken agusar kadagiti utilidad ti panagsisina . Imutektekanyo a kasapulam la ketdi dagiti kanayonan nga estilo ti panagdakkel tapno malapdan ti kalawa ti menu.

html nga

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

Dagiti Pormas

Mangikabilka iti porma iti uneg ti dropdown menu, wenno aramidem dayta a dropdown menu, ken agusarka kadagiti margin wenno padding utilities tapno maitedmo iti negatibo nga espasio a kasapulam.

html nga

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

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

Usaren ti data-bs-offsetwenno data-bs-referencetapno baliwan ti lokasion ti dropdown.

html nga

<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 ti kababalin

Babaen ti default, ti dropdown menu ket naserraan no ag-click iti uneg wenno ruar ti dropdown menu. Mabalinmo nga usaren ti autoClosepagpilian a mangbalbaliw iti daytoy a kababalin ti dropdown.

html nga

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

Dagiti Variable

Nainayon iti v5.2.0

Kas paset ti agbaliwbaliw nga asidegan dagiti CSS a variable ti Bootstrap, dagiti dropdown ket agus-usar itan kadagiti lokal a CSS a variable iti .dropdown-menupara iti napasayaat nga aktual nga oras a panagpasayaat. Dagiti pateg para kadagiti variable ti CSS ket naikeddeng babaen ti Sass, isu a ti panagpasayaat ti Sass ket nasuportaran pay laeng, met.

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

Ti panagpasayaat babaen dagiti variable ti CSS ket mabalin a makita iti .dropdown-menu-darkklase a sadiay ket mangbalbaliwtayo kadagiti espesipiko a pateg a saan a manginayon kadagiti naduplikado a managpili ti CSS.

  --#{$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 dagiti variable

Dagiti variable para kadagiti amin a dropdown:

$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

Dagiti variable para iti nasipnget a dropdown :

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

Dagiti variable para kadagiti CSS-a naibatay a caret a mangipakita ti panagtitinnulong ti maysa a dropdown:

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

Dagiti Mixin

Dagiti mixin ket maus-usar a mangpataud kadagiti CSS-a naibatay a caret ken mabalin a masarakan idiay 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;
    }
  }
}

Panagusar

Babaen dagiti kabileg ti datos wenno JavaScript, ti dropdown a plugin ket mangbalbaliw ti nailemmeng a linaon (dagiti dropdown a menu) babaen ti panangibaliw ti .showklase iti nagannak .dropdown-menu. Ti data-bs-toggle="dropdown"attribute ket agpannuray para iti panagserra kadagiti dropdown a menu iti maysa a lebel ti aplikasion, isu a nasayaat nga ideya a kanayon nga usaren daytoy.

Kadagiti touch-enabled nga alikamen, ti pananglukat iti dropdown ket mangnayon kadagiti empty mouseoverhandler kadagiti dagus nga annak ti <body>elemento. Daytoy nga aminen a naalas a hack ket kasapulan tapno agtrabaho iti aglawlaw ti maysa a quirk iti iOS’ event delegation , a no saan ket manglapped iti maysa a tap iti sadinoman iti ruar ti dropdown manipud iti panangtignay iti kodigo a mangiserra iti dropdown. Apaman a naserraan ti dropdown, mouseovermaikkat dagitoy a kanayonan nga empty handler.

Babaen kadagiti attribute ti datos

Inayon data-bs-toggle="dropdown"iti link wenno buton tapno mai-toggle ti dropdown.

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

Babaen ti JavaScript

Tawagan dagiti dropdown babaen ti JavaScript:

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

`data-bs-toggle="dropdown"`kasapulan pay laeng

Uray no awagam ti dropdownmo babaen ti JavaScript wenno imbes ketdi usarem ti data-api, data-bs-toggle="dropdown"ket kanayon a kasapulan nga adda iti trigger element ti dropdown.

Dagiti Pagpilian

Kas dagiti pagpilian ket mabalin a maipasa babaen dagiti kababalin ti datos wenno JavaScript, mabalinmo nga inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-animation="{value}". Siguraduen a baliwan ti kita ti kaso ti nagan ti pagpilian manipud iti “ camelCase ” iti “ kebab-case ” no ipasa dagiti pagpilian babaen kadagiti kababalin ti datos. Kas pagarigan, usaren data-bs-custom-class="beautifier"imbes a data-bs-customClass="beautifier".

Manipud iti Bootstrap 5.2.0, amin a paset ket mangsuporta ti eksperimental a naireserba a kababalin ti datos data-bs-configa mabalin a mangbalay ti simple a panagisaad ti paset a kas ti kuerdas ti JSON. No ti maysa nga elemento ket addaan kadagiti data-bs-config='{"delay":0, "title":123}'ken data-bs-title="456"dagiti kababalin, ti maudi a titlepateg ket agbalinto 456ken dagiti naisina a kababalin ti datos ket mangbalbaliw kadagiti pateg a naited iti data-bs-config. Iti pay maipatinayon, dagiti addan a kababalin ti datos ket makabaelda a mangbalay kadagiti pateg ti JSON a kas ti data-bs-delay='{"show":0,"hide":150}'.

Nagan	Tipo	Default	Panangiladawan
`autoClose`	boolean, kuerdas	`true`	Ikonfigura ti auto close a kababalin ti dropdown: `true`- ti dropdown ket maiserra babaen ti panangi-click iti ruar wenno uneg ti dropdown menu. `false`- ti dropdown ket maiserra babaen ti panangi-click ti toggle button ken manual nga awag `hide`wenno `toggle`pamay-an. (Kasta met a saan a maiserra babaen ti panangi-press iti `esc`key) `'inside'`- ti dropdown ket maiserra (laeng) babaen ti panangi-click iti uneg ti dropdown menu. `'outside'`- ti dropdown ket maiserra (laeng) babaen ti panangi-klik iti ruar ti dropdown menu. Pakaammo: ti dropdown ket kanayon a mabalin a maiserra babaen ti `ESC`tulbek.
`boundary`	kuerdas, elemento	`'clippingParents'`	Beddeng ti limitasion ti panaglablabes ti dropdown a menu (agaplikar laeng iti preventOverflow a mangbalbaliw ti Popper). Babaen ti kasisigud daytoy `clippingParents`ket mabalin nga umawat ti reperensia ti HTMLElement (babaen laeng ti JavaScript). Para iti ad-adu pay nga impormasion kitaen dagiti dokumento ti detectOverflow ni Popper .
`display`	kuerdas	`'dynamic'`	Babaen ti default, usarenmi ti Popper para iti dinamiko a panagposision. Ibaldado daytoy babaen ti `static`.
`offset`	array, kuerdas, trabaho	`[0, 2]`	Offset ti dropdown relatibo iti targetna. Mabalinmo nga ipasa ti maysa a kuerdas kadagiti kabileg ti datos nga addaan kadagiti pateg a naisina babaen ti koma a kas ti: `data-bs-offset="10,20"`. No ti maysa a panagandar ket maus-usar a mangikeddeng ti offset, daytoy ket maawagan babaen ti maysa a banag a naglaon ti pannakaikabil ti popper, ti reperensia, ken dagiti popper rects a kas ti umuna nga argumentona. Ti mangtignay nga elemento a DOM a nodo ket maipasa a kas ti maikadua nga argumento. Ti panagandar ket masapul nga agsubli ti maysa nga array nga addaan kadagiti dua a numero: skidding , distansia . Para iti ad-adu pay nga impormasion kitaen dagiti offset docs ni Popper .
`popperConfig`	null, banag, trabaho	`null`	Tapno baliwan ti default a Popper a konfigurasion ti Bootstrap, kitaen ti panagisaad ti Popper . No ti maysa a panagandar ket maus-usar a mangpartuat ti panagisaad ti Popper, daytoy ket maawagan babaen ti maysa a banag a naglaon ti kasisigud a panagisaad ti Popper ti Bootstrap. Tulongannaka nga agusar ken mangitipon ti default iti bukodmo a panagisaad. Ti panagandar ket masapul nga isublina ti maysa a banag ti panagisaad para iti Popper.
`reference`	kuerdas, elemento, banag	`'toggle'`	Reperensia nga elemento ti dropdown menu. Awaten dagiti pateg ti `'toggle'`, `'parent'`, ti maysa a reperensia ti HTMLElement wenno ti maysa a banag a mangipaay ti `getBoundingClientRect`. Para iti ad-adu nga impormasion kitaen dagiti dok ti konstruktor ni Popper ken dagiti dok ti birtual nga elemento .

Usar ti function nga addaan`popperConfig`

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

Dagiti Pamay-an

Wagas	Panangiladawan
`dispose`	Dadaelenna ti dropdown ti maysa nga elemento. (Ikkaten ti naidulin a datos iti elemento ti DOM)
`getInstance`	Estatiko a pamay-an a mangipalubos kenka a makaala ti dropdown a pagarigan a nainaig iti maysa nga elemento ti DOM, mabalinmo nga usaren daytoy a kas iti daytoy: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Estatiko a pamay-an a mangisubli ti dropdown a pagarigan a nainaig iti elemento ti DOM wenno mangpartuat ti baro no kas pagarigan saan a nairugi. Mabalinmo nga usaren dayta a kastoy: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Ilemmeng ti dropdown menu ti naited a navbar wenno tabbed navigation.
`show`	Ipakita ti dropdown menu ti naited a navbar wenno tabbed navigation.
`toggle`	I-toggle ti dropdown menu ti naited a navbar wenno tabbed navigation.
`update`	Ipabaro ti posision ti dropdown ti maysa nga elemento.

Dagiti Pasamak

Amin a dropdown events ket maipaputok iti toggling element ken kalpasanna ket bubbled up. Isu a mabalinmo pay ti manginayon kadagiti agdengdengngeg ti pasamak iti .dropdown-menu's nagannak nga elemento. hide.bs.dropdownken hidden.bs.dropdowndagiti pasamak ket addaan iti clickEventtagikua (no laeng ti orihinal a kita ti Pasamak ket click) a naglaon ti Bagay ti Pasamak para iti pasamak ti panagpidut.

Kita ti pasamak	Panangiladawan
`hide.bs.dropdown`	Dagus nga agputok no ti `hide`pamay-an ti instansia ket naawagan.
`hidden.bs.dropdown`	Napaputok no ti dropdown ket nalpas a nailemmeng manipud iti agar-aramat ken dagiti panagbalbaliw ti CSS ket nalpasen.
`show.bs.dropdown`	Dagus nga agputok no `show`maawagan ti pamay-an ti instansia.
`shown.bs.dropdown`	Napaputok no ti dropdown ket naaramid a makita ti agar-aramat ken dagiti panagbalbaliw ti CSS ket nalpasen.

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

Dagiti dropdown

Panangkita iti pakabuklan

Ti pannakagun-od

Dagiti pagarigan

Maymaysa a buton

Split ti buton

Panag-sizing

Nasipnget dagiti dropdown

Dagiti Direksion

RTL nga

Naisentro

Dropup nga

Dropup ti naisentro

Dropend nga

Panag-dropstart

Dagiti banag iti menu

Aktibo

Awanan ti kabaelan

Panagtunos ti menu

Responsibo a panagtunos

Dagiti pagpilian iti panagtunos

Linaon ti menu

Dagiti ulo

Dagiti Mangbingaybingay

Teksto

Dagiti Pormas

Auto close ti kababalin

CSS nga

Dagiti Variable

Sass dagiti variable

Dagiti Mixin

Panagusar

Babaen kadagiti attribute ti datos

Babaen ti JavaScript

`data-bs-toggle="dropdown"`kasapulan pay laeng

Dagiti Pagpilian

Usar ti function nga addaan`popperConfig`

Dagiti Pamay-an

Dagiti Pasamak

Dagiti dropdown

Panangkita iti pakabuklan

Ti pannakagun-od

Dagiti pagarigan

Maymaysa a buton

Split ti buton

Panag-sizing

Nasipnget dagiti dropdown

Dagiti Direksion

RTL nga

Naisentro

Dropup nga

Dropup ti naisentro

Dropend nga

Panag-dropstart

Dagiti banag iti menu

Aktibo

Awanan ti kabaelan

Panagtunos ti menu

Responsibo a panagtunos

Dagiti pagpilian iti panagtunos

Linaon ti menu

Dagiti ulo

Dropdown nga ulo

Dagiti Mangbingaybingay

Teksto

Dagiti Pormas

Dagiti pagpilian iti dropdown

Auto close ti kababalin

CSS nga

Dagiti Variable

Sass dagiti variable

Dagiti Mixin

Panagusar

Babaen kadagiti attribute ti datos

Babaen ti JavaScript

data-bs-toggle="dropdown"kasapulan pay laeng

Dagiti Pagpilian

Usar ti function nga addaanpopperConfig

Dagiti Pamay-an

Dagiti Pasamak

`data-bs-toggle="dropdown"`kasapulan pay laeng

Usar ti function nga addaan`popperConfig`