Mga dropdown

I-toggle ang mga contextual overlay para sa pagpapakita ng mga listahan ng mga link at higit pa gamit ang Bootstrap dropdown plugin.

Sa pahinang ito

Pangkalahatang-ideya

Ang mga dropdown ay toggleable, contextual overlay para sa pagpapakita ng mga listahan ng mga link at higit pa. Ginawa silang interactive gamit ang kasamang Bootstrap dropdown JavaScript plugin. Ang mga ito ay toggle sa pamamagitan ng pag-click, hindi sa pamamagitan ng pag-hover; ito ay isang intensyonal na desisyon sa disenyo .

Ang mga dropdown ay binuo sa isang third party na library, Popper , na nagbibigay ng dynamic na pagpoposisyon at viewport detection. Tiyaking isama ang popper.min.js bago ang JavaScript ng Bootstrap o gamitin ang bootstrap.bundle.min.js/ bootstrap.bundle.jsna naglalaman ng Popper. Ang Popper ay hindi ginagamit upang iposisyon ang mga dropdown sa mga navbar kahit na hindi kinakailangan ang dynamic na pagpoposisyon.

Accessibility

Ang WAI ARIA standard ay tumutukoy sa isang aktwal na role="menu"widget , ngunit ito ay partikular sa mga application-like na menu na nagti-trigger ng mga aksyon o function. Ang mga ARIA menu ay maaari lamang maglaman ng mga menu item, checkbox menu item, radio button menu item, radio button group, at sub-menu.

Ang mga dropdown ng Bootstrap, sa kabilang banda, ay idinisenyo upang maging generic at naaangkop sa iba't ibang sitwasyon at istruktura ng markup. Halimbawa, posibleng gumawa ng mga dropdown na naglalaman ng mga karagdagang input at kontrol ng form, gaya ng mga field sa paghahanap o mga form sa pag-login. Para sa kadahilanang ito, hindi inaasahan ng Bootstrap (o awtomatikong magdagdag) ng alinman sa roleat mga aria-katangiang kinakailangan para sa mga tunay na menu ng ARIA . Kailangang isama ng mga may-akda ang mga mas partikular na katangiang ito mismo.

Gayunpaman, ang Bootstrap ay nagdaragdag ng built-in na suporta para sa karamihan ng mga karaniwang pakikipag-ugnayan sa menu ng keyboard, tulad ng kakayahang lumipat sa mga indibidwal na .dropdown-itemelemento gamit ang mga cursor key at isara ang menu gamit ang ESCkey.

Mga halimbawa

I-wrap ang toggle ng dropdown (iyong button o link) at ang dropdown na menu sa loob ng .dropdown, o isa pang elementong nagdedeklara ng position: relative;. Maaaring ma-trigger ang mga dropdown mula sa <a>o <button>mga elemento upang mas umangkop sa iyong mga potensyal na pangangailangan. Ang mga halimbawang ipinapakita dito ay gumagamit ng mga elementong semantiko <ul>kung saan naaangkop, ngunit sinusuportahan ang custom na markup.

Isang pindutan

Anumang single .btnay maaaring gawing dropdown toggle na may ilang pagbabago sa markup. Narito kung paano mo magagamit ang mga ito sa alinmang <button>elemento:

html

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

At may <a>mga elemento:

html

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

Ang pinakamagandang bahagi ay magagawa mo rin ito sa anumang variant ng button:

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

Katulad nito, lumikha ng mga dropdown ng split button na may halos kaparehong markup ng mga dropdown ng solong button, ngunit kasama ang pagdaragdag ng .dropdown-toggle-splitpara sa wastong espasyo sa paligid ng dropdown caret.

Ginagamit namin ang dagdag na klase na ito upang bawasan ang pahalang paddingsa magkabilang gilid ng caret ng 25% at alisin ang margin-leftidinagdag para sa mga regular na dropdown ng button. Ang mga karagdagang pagbabagong iyon ay nagpapanatili sa caret na nakasentro sa split button at nagbibigay ng mas naaangkop na laki ng hit area sa tabi ng pangunahing button.

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

Pagsusukat

Gumagana ang mga dropdown ng button sa mga button sa lahat ng laki, kabilang ang mga default at split dropdown na button.

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

Madilim na dropdown

Mag-opt in sa mas madidilim na dropdown upang tumugma sa madilim na navbar o custom na istilo sa pamamagitan ng pagdaragdag .dropdown-menu-darksa isang umiiral na .dropdown-menu. Walang kinakailangang pagbabago sa mga dropdown na item.

html

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

At ginagamit ito sa isang navbar:

html

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

Mga direksyon

RTL

Ang mga direksyon ay sinasalamin kapag gumagamit ng Bootstrap sa RTL, ibig sabihin .dropstartay lalabas sa kanang bahagi.

Nakasentro

Gawing nakasentro ang dropdown na menu sa ibaba ng toggle gamit .dropdown-centerang parent element.

html

<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

I-trigger ang mga dropdown na menu sa itaas ng mga elemento sa pamamagitan ng pagdaragdag .dropupsa parent na 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>

Nakasentro ang dropup

Gawing nakasentro ang dropup menu sa itaas ng toggle gamit .dropup-centerang parent element.

html

<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

I-trigger ang mga dropdown na menu sa kanan ng mga elemento sa pamamagitan ng pagdaragdag .dropendsa parent na 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>

Dropstart

I-trigger ang mga dropdown na menu sa kaliwa ng mga elemento sa pamamagitan ng pagdaragdag .dropstartsa parent na 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>

Maaari mong gamitin ang <a>o <button>mga elemento bilang mga dropdown na item.

html

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

Maaari ka ring gumawa ng mga hindi interactive na dropdown na item gamit ang .dropdown-item-text. Huwag mag-atubiling mag-istilo pa gamit ang custom na CSS o mga text utilities.

html

<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

Idagdag .activesa mga item sa dropdown upang i- istilo ang mga ito bilang aktibo . Upang maihatid ang aktibong estado sa mga teknolohiyang pantulong, gamitin ang aria-currentkatangian — gamit ang pagehalaga para sa kasalukuyang pahina, o truepara sa kasalukuyang item sa isang set.

html

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

Hindi pinagana

Idagdag .disabledsa mga item sa dropdown upang i- istilo ang mga ito bilang hindi pinagana .

html

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

Bilang default, ang isang dropdown na menu ay awtomatikong nakaposisyon nang 100% mula sa itaas at sa kaliwang bahagi ng magulang nito. Mababago mo ito sa mga direksyong .drop*klase, ngunit maaari mo ring kontrolin ang mga ito gamit ang mga karagdagang klase ng modifier.

Idagdag .dropdown-menu-endsa isang .dropdown-menui-align sa kanan ang dropdown na menu. Ang mga direksyon ay sinasalamin kapag gumagamit ng Bootstrap sa RTL, ibig sabihin .dropdown-menu-enday lalabas sa kaliwang bahagi.

Heads up! Ang mga dropdown ay nakaposisyon salamat sa Popper maliban kung ang mga ito ay nakapaloob sa isang navbar.

html

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

Tumutugon sa pagkakahanay

Kung gusto mong gumamit ng tumutugong alignment, huwag paganahin ang dynamic na pagpoposisyon sa pamamagitan ng pagdaragdag ng data-bs-display="static"attribute at gamitin ang mga tumutugong klase ng variation.

Upang ihanay sa kanan ang dropdown na menu sa ibinigay na breakpoint o mas malaki, idagdag ang .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

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

Upang ihanay sa kaliwa ang dropdown na menu sa ibinigay na breakpoint o mas malaki, magdagdag .dropdown-menu-endat .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

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

Tandaan na hindi mo kailangang magdagdag ng data-bs-display="static"attribute sa mga dropdown na button sa mga navbar, dahil hindi ginagamit ang Popper sa mga navbar.

Mga pagpipilian sa pagkakahanay

Sa pagkuha ng karamihan sa mga opsyon na ipinapakita sa itaas, narito ang isang maliit na kitchen sink demo ng iba't ibang dropdown alignment na opsyon sa isang lugar.

html

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

Mga header

Magdagdag ng header upang lagyan ng label ang mga seksyon ng mga aksyon sa anumang dropdown na menu.

html

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

Mga divider

Paghiwalayin ang mga pangkat ng mga kaugnay na item sa menu na may divider.

html

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

Text

Ilagay ang anumang freeform na text sa loob ng dropdown na menu na may text at gumamit ng mga spacing utilities . Tandaan na malamang na kailangan mo ng mga karagdagang istilo ng pagpapalaki upang hadlangan ang lapad ng menu.

html

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

Mga porma

Maglagay ng form sa loob ng dropdown na menu, o gawin itong dropdown na menu, at gumamit ng margin o padding utility para bigyan ito ng negatibong espasyo na kailangan mo.

html

<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

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

Gamitin data-bs-offseto data-bs-referencepara baguhin ang lokasyon ng dropdown.

html

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

Bilang default, sarado ang dropdown na menu kapag nag-click sa loob o labas ng dropdown na menu. Maaari mong gamitin ang autoCloseopsyon upang baguhin ang gawi na ito ng dropdown.

html

<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

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, gumagamit na ngayon ang mga dropdown ng mga lokal na variable ng CSS .dropdown-menupara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

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

Ang pag-customize sa pamamagitan ng mga variable ng CSS ay makikita sa .dropdown-menu-darkklase kung saan ino-override namin ang mga partikular na value nang hindi nagdaragdag ng mga duplicate na tagapili ng 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 variable

Mga variable para sa lahat ng 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

Mga variable para sa madilim na 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;

Mga variable para sa mga caret na nakabatay sa CSS na nagsasaad ng interaktibidad ng dropdown:

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

Mixins

Ginagamit ang mga mixin upang bumuo ng mga caret na nakabatay sa CSS at makikita sa 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;
    }
  }
}

Paggamit

Sa pamamagitan ng mga attribute ng data o JavaScript, i-toggle ng dropdown na plugin ang nakatagong content (mga dropdown na menu) sa pamamagitan ng pag-toggle sa .showklase sa parent .dropdown-menu. Ang data-bs-toggle="dropdown"katangian ay umaasa para sa pagsasara ng mga dropdown na menu sa antas ng application, kaya magandang ideya na palaging gamitin ito.

Sa mga touch-enabled na device, ang pagbubukas ng dropdown ay nagdaragdag ng mga walang laman mouseoverna humahawak sa mga kalapit na anak ng <body>elemento. Ang tinatanggap na pangit na hack na ito ay kinakailangan upang malutas ang isang quirk sa pagtatalaga ng kaganapan ng iOS , na kung hindi man ay mapipigilan ang pag-tap saanman sa labas ng dropdown mula sa pagti-trigger ng code na nagsasara ng dropdown. Kapag naisara na ang dropdown, mouseoveraalisin ang mga karagdagang walang laman na handler na ito.

Sa pamamagitan ng mga katangian ng data

Idagdag data-bs-toggle="dropdown"sa isang link o button upang i-toggle ang isang dropdown.

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

Sa pamamagitan ng JavaScript

Tawagan ang mga dropdown sa pamamagitan ng JavaScript:

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

`data-bs-toggle="dropdown"`kailangan pa rin

Hindi alintana kung tawagan mo ang iyong dropdown sa pamamagitan ng JavaScript o sa halip ay gumamit ng data-api, data-bs-toggle="dropdown"palaging kinakailangang naroroon sa elemento ng trigger ng dropdown.

Mga pagpipilian

Dahil maaaring maipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript, maaari kang magdagdag ng pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-animation="{value}". Siguraduhing baguhin ang uri ng case ng pangalan ng opsyon mula sa " camelCase " sa " kebab-case " kapag ipinapasa ang mga opsyon sa pamamagitan ng mga katangian ng data. Halimbawa, gamitin data-bs-custom-class="beautifier"sa halip na data-bs-customClass="beautifier".

Mula sa Bootstrap 5.2.0, sinusuportahan ng lahat ng mga bahagi ang isang pang- eksperimentong nakalaan na katangian ng data data-bs-configna maaaring maglagay ng simpleng configuration ng bahagi bilang isang string ng JSON. Kapag ang isang elemento ay may data-bs-config='{"delay":0, "title":123}'at data-bs-title="456"mga katangian, ang huling titlehalaga ay magiging 456at ang hiwalay na mga katangian ng data ay mag-o-override sa mga halagang ibinigay sa data-bs-config. Bilang karagdagan, ang mga kasalukuyang katangian ng data ay nakakapaglagay ng mga halaga ng JSON tulad ng data-bs-delay='{"show":0,"hide":150}'.

Pangalan	Uri	Default	Paglalarawan
`autoClose`	boolean, string	`true`	I-configure ang awtomatikong pagsasara ng gawi ng dropdown: `true`- isasara ang dropdown sa pamamagitan ng pag-click sa labas o sa loob ng dropdown na menu. `false`- isasara ang dropdown sa pamamagitan ng pag-click sa toggle button at manu-manong pagtawag `hide`o `toggle`pamamaraan. (Hindi rin isasara sa pamamagitan ng pagpindot sa `esc`key) `'inside'`- isasara ang dropdown (lamang) sa pamamagitan ng pag-click sa loob ng dropdown na menu. `'outside'`- isasara ang dropdown (lamang) sa pamamagitan ng pag-click sa labas ng dropdown na menu. Tandaan: maaaring palaging isara ang dropdown gamit ang `ESC`susi.
`boundary`	string, elemento	`'clippingParents'`	Overflow constraint boundary ng dropdown na menu (nalalapat lang sa preventOverflow modifier ng Popper). Bilang default, ito `clippingParents`ay at maaaring tumanggap ng isang HTMLElement reference (sa pamamagitan lamang ng JavaScript). Para sa higit pang impormasyon sumangguni sa detectOverflow docs ng Popper .
`display`	string	`'dynamic'`	Bilang default, ginagamit namin ang Popper para sa dynamic na pagpoposisyon. Huwag paganahin ito gamit ang `static`.
`offset`	array, string, function	`[0, 2]`	Offset ng dropdown na nauugnay sa target nito. Maaari kang magpasa ng string sa mga katangian ng data na may mga halagang pinaghihiwalay ng kuwit tulad ng: `data-bs-offset="10,20"`. Kapag ang isang function ay ginamit upang matukoy ang offset, ito ay tinatawag na may isang bagay na naglalaman ng popper placement, ang reference, at popper rects bilang ang unang argumento nito. Ang triggering element na DOM node ay ipinasa bilang pangalawang argumento. Ang function ay dapat magbalik ng array na may dalawang numero: skidding , distance . Para sa higit pang impormasyon sumangguni sa mga offset na doc ng Popper .
`popperConfig`	null, object, function	`null`	Upang baguhin ang default na Popper config ng Bootstrap, tingnan ang configuration ng Popper . Kapag ang isang function ay ginamit upang lumikha ng Popper configuration, ito ay tinatawag na may isang object na naglalaman ng default na Popper configuration ng Bootstrap. Tinutulungan ka nitong gamitin at pagsamahin ang default sa sarili mong configuration. Ang function ay dapat magbalik ng configuration object para sa Popper.
`reference`	string, elemento, bagay	`'toggle'`	Sanggunian na elemento ng dropdown na menu. Tumatanggap ng mga halaga ng `'toggle'`, `'parent'`, isang HTMLElement reference o isang bagay na nagbibigay `getBoundingClientRect`. Para sa karagdagang impormasyon sumangguni sa Popper's constructor docs at virtual element docs .

Paggamit ng function na may`popperConfig`

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

Paraan

Pamamaraan	Paglalarawan
`dispose`	Sinisira ang dropdown ng isang elemento. (Aalisin ang nakaimbak na data sa elemento ng DOM)
`getInstance`	Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Hides the dropdown menu of a given navbar or tabbed navigation.
`show`	Shows the dropdown menu of a given navbar or tabbed navigation.
`toggle`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`update`	Updates the position of an element’s dropdown.

Events

All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the .dropdown-menu’s parent element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original Event type is click) that contains an Event Object for the click event.

Event type	Description
`hide.bs.dropdown`	Fires immediately when the `hide` instance method has been called.
`hidden.bs.dropdown`	Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
`show.bs.dropdown`	Fires immediately when the `show` instance method is called.
`shown.bs.dropdown`	Fired when the dropdown has been made visible to the user and CSS transitions have completed.

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

Mga dropdown

Pangkalahatang-ideya

Accessibility

Mga halimbawa

Isang pindutan

Split button

Pagsusukat

Madilim na dropdown

Mga direksyon

RTL

Nakasentro

Dropup

Nakasentro ang dropup

Dropend

Dropstart

Mga item sa menu

Aktibo

Hindi pinagana

Pag-align ng menu

Tumutugon sa pagkakahanay

Mga pagpipilian sa pagkakahanay

Nilalaman ng menu

Mga header

Mga divider

Text

Mga porma

Auto close na gawi

CSS

Mga variable

Sass variable

Mixins

Paggamit

Sa pamamagitan ng mga katangian ng data

Sa pamamagitan ng JavaScript

`data-bs-toggle="dropdown"`kailangan pa rin

Mga pagpipilian

Paggamit ng function na may`popperConfig`

Paraan

Events

Mga dropdown

Pangkalahatang-ideya

Accessibility

Mga halimbawa

Isang pindutan

Split button

Pagsusukat

Madilim na dropdown

Mga direksyon

RTL

Nakasentro

Dropup

Nakasentro ang dropup

Dropend

Dropstart

Mga item sa menu

Aktibo

Hindi pinagana

Pag-align ng menu

Tumutugon sa pagkakahanay

Mga pagpipilian sa pagkakahanay

Nilalaman ng menu

Mga header

Dropdown na header

Mga divider

Text

Mga porma

Mga pagpipilian sa dropdown

Auto close na gawi

CSS

Mga variable

Sass variable

Mixins

Paggamit

Sa pamamagitan ng mga katangian ng data

Sa pamamagitan ng JavaScript

data-bs-toggle="dropdown"kailangan pa rin

Mga pagpipilian

Paggamit ng function na maypopperConfig

Paraan

Events

`data-bs-toggle="dropdown"`kailangan pa rin

Paggamit ng function na may`popperConfig`