Dropdowns

Toggle overlays kontekstual pikeun mintonkeun daptar tumbu jeung leuwih ku Bootstrap dropdown plugin.

Dina kaca ieu

Ihtisar

Dropdowns tiasa toggle, overlays kontekstual pikeun mintonkeun daptar tumbu sareng seueur deui. Éta didamel interaktif sareng plugin JavaScript dropdown Bootstrap anu kalebet. Aranjeunna toggled ku ngaklik, teu ku hovering; ieu kaputusan desain ngahaja .

Dropdowns diwangun dina perpustakaan pihak katilu, Popper , nu nyadiakeun positioning dinamis sarta deteksi viewport. Pastikeun kalebet popper.min.js sateuacan Bootstrap JavaScript atanapi nganggo bootstrap.bundle.min.js/ bootstrap.bundle.jsanu ngandung Popper. Popper henteu dianggo pikeun nempatkeun turunna dina navbar sanaos posisi dinamis henteu diperyogikeun.

Aksesibilitas

Standar WAI ARIA ngahartikeun role="menu"widget sabenerna , tapi ieu husus pikeun ménu kawas aplikasi nu memicu tindakan atawa fungsi. Menu ARIA ngan ukur tiasa ngandung item ménu, item ménu kotak centang, item ménu tombol radio, grup tombol radio, sareng sub-menu.

Dropdown Bootstrap, di sisi anu sanés, dirancang pikeun umum sareng tiasa dianggo pikeun sababaraha kaayaan sareng struktur markup. Contona, kasebut nyaéta dimungkinkeun pikeun nyieun dropdowns nu ngandung inputs tambahan sarta kontrol formulir, kayaning widang teangan atawa formulir login. Ku sabab kitu, Bootstrap henteu nyangka (atanapi sacara otomatis nambihan) salah sahiji rolesareng aria-atribut anu diperyogikeun pikeun ménu ARIA anu leres. Pangarang kedah ngalebetkeun atribut anu langkung spésifik ieu nyalira.

Nanging, Bootstrap nambihan dukungan anu diwangun pikeun sabagéan ageung interaksi ménu keyboard standar, sapertos kamampuan pikeun mindahkeun .dropdown-itemelemen individu nganggo konci kursor sareng nutup ménu nganggo ESCkonci éta.

Contona

Bungkus toggle dropdown urang (tombol atawa link anjeun) jeung menu dropdown dina .dropdown, atawa elemen séjén nu nyatakeun position: relative;. Dropdowns tiasa dipicu tina <a>atanapi <button>elemen pikeun nyocogkeun ka kabutuhan poténsial anjeun. Conto-conto anu dipidangkeun di dieu nganggo <ul>unsur-unsur semantik anu pas, tapi markup khusus dirojong.

Tombol tunggal

Sakur tunggal .btntiasa dirobih janten togél lungsur sareng sababaraha parobihan markup. Kieu kumaha anjeun tiasa nempatkeun aranjeunna damel sareng unsur- <button>unsur:

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>

Jeung <a>unsur:

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>

Bagian anu pangsaéna nyaéta anjeun tiasa ngalakukeun ieu sareng varian tombol naon waé:

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

Tombol pamisah

Nya kitu, jieun dropdowns tombol pamisah jeung markup ampir sarua salaku dropdowns tombol tunggal, tapi ditambahan .dropdown-toggle-splitpikeun spasi ditangtoskeun sabudeureun caret dropdown.

Kami nganggo kelas tambahan ieu pikeun ngirangan horisontal paddingdina dua sisi karet ku 25% sareng ngahapus margin-leftanu ditambah pikeun turunna tombol biasa. Parobihan tambahan éta ngajaga karét dipuseurkeun dina tombol pamisah sareng nyayogikeun daérah pencét ukuran anu langkung pas gigireun tombol utama.

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

Ukuran

Tombol dropdowns tiasa dianggo sareng tombol sadaya ukuran, kalebet tombol dropdown standar sareng pamisah.

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

dropdowns poék

Milih kana dropdown anu langkung poék pikeun cocog sareng navbar poék atanapi gaya khusus ku cara nambihan .dropdown-menu-darkkana .dropdown-menu. Henteu aya parobihan anu diperyogikeun pikeun item turun.

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>

Sareng nempatkeun éta pikeun dianggo dina 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>

Pitunjuk

RTL

Arah anu mirrored nalika maké Bootstrap di RTL, hartina .dropstartbakal muncul di sisi katuhu.

Dipuseurkeun

Jieun menu dropdown dipuseurkeun di handap toggle kalawan .dropdown-centerdina elemen indungna.

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

Micu ménu dropdown luhureun elemen ku nambahkeun .dropupkana elemen indungna.

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

Jieun menu turunna dipuseurkeun di luhur toggle kalawan .dropup-centerdina elemen indungna.

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

Micu ménu dropdown di katuhu tina elemen ku nambahkeun .dropendkana elemen indungna.

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

Micu ménu dropdown di kénca elemen ku nambahkeun .dropstartkana elemen indungna.

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

Anjeun tiasa nganggo <a>atanapi <button>elemen salaku item dropdown.

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>

Anjeun oge bisa nyieun item dropdown non-interaktif jeung .dropdown-item-text. Ngarasa Luncat ka gaya salajengna kalawan CSS custom atawa utilitas téks.

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>

Aktip

Tambahkeun .activeka item dina dropdown pikeun gaya aranjeunna salaku aktip . Pikeun nepikeun kaayaan aktip ka téhnologi assistive, make aria-currentatribut — ngagunakeun pagenilai pikeun kaca ayeuna, atawa truepikeun item ayeuna dina susunan.

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>

ditumpurkeun

Tambahkeun .disabledka item dina dropdown pikeun gaya aranjeunna salaku ditumpurkeun .

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>

Sacara standar, menu dropdown otomatis diposisikan 100% ti luhur jeung sapanjang sisi kénca indungna. Anjeun tiasa ngarobih ieu sareng .drop*kelas arah, tapi anjeun ogé tiasa ngontrolana ku kelas modifier tambahan.

Tambahkeun .dropdown-menu-endka .dropdown-menukatuhu align menu dropdown. Arah anu mirrored nalika maké Bootstrap di RTL, hartina .dropdown-menu-endbakal muncul di sisi kénca.

Mastaka tegak! Dropdowns diposisikan berkat Popper iwal lamun aranjeunna dikandung dina navbar a.

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>

alignment responsif

Upami anjeun hoyong nganggo alignment responsif, pareuman posisi dinamis ku cara nambihan data-bs-display="static"atribut sareng nganggo kelas variasi responsif.

Pikeun align katuhu menu dropdown jeung breakpoint dibikeun atawa leuwih badag, tambahkeun .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>

Pikeun align kénca menu dropdown jeung breakpoint dibikeun atawa leuwih badag, tambahkeun .dropdown-menu-endna .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>

Catet yén anjeun henteu kedah nambihan data-bs-display="static"atribut kana tombol turun dina navbar, sabab Popper henteu dianggo dina navbar.

Pilihan alignment

Nyandak seueur pilihan anu dipidangkeun di luhur, ieu mangrupikeun demo tilelep dapur leutik tina sababaraha pilihan alignment dropdown di hiji tempat.

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>

lulugu

Tambahkeun lulugu pikeun labél bagian tina lampah dina menu dropdown mana wae.

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>

Pamisah

Misahkeun grup item menu nu patali jeung divider a.

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>

Téks

Teundeun sagala téks wangun bébas dina menu dropdown kalawan téks na make spasi utilitas . Catet yén anjeun sigana peryogi gaya ukuran tambahan pikeun ngawatesan lebar ménu.

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>

Bentuk

Nempatkeun formulir dina menu dropdown, atawa nyieun kana menu dropdown, sarta ngagunakeun margin atawa padding Utiliti pikeun masihan eta spasi négatip nu peryogi.

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>

Anggo data-bs-offsetatanapi data-bs-referencekanggo ngarobih lokasi turunna.

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>

kabiasaan nutup otomatis

Sacara standar, menu dropdown ditutup nalika ngaklik di jero atanapi di luar menu dropdown. Anjeun tiasa make autoClosepilihan pikeun ngarobah kabiasaan ieu dropdown nu.

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

Variabel

Ditambahkeun dina v5.2.0

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, dropdowns ayeuna nganggo variabel CSS lokal .dropdown-menupikeun ningkatkeun kustomisasi sacara real-time. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

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

Kustomisasi ngaliwatan variabel CSS bisa ditempo dina .dropdown-menu-darkkelas dimana urang override nilai husus tanpa nambahkeun duplikat pamilih 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};

variabel Sass

Variabel pikeun sakabéh dropdowns:

$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

Variabel pikeun dropdown poék :

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

Variabel pikeun carets basis CSS nu nunjukkeun interaktivitas dropdown urang:

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

Campuran

Mixins dipaké pikeun ngahasilkeun carets basis CSS jeung bisa kapanggih dina 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;
    }
  }
}

Pamakéan

Via atribut data atawa JavaScript, plugin dropdown toggles eusi disumputkeun (dropdown menu) ku toggling .showkelas on indungna .dropdown-menu. Atribut data-bs-toggle="dropdown"ieu diandelkeun pikeun nutup ménu lungsur dina tingkat aplikasi, janten ide anu sae pikeun nganggo éta.

Dina alat touch-diaktipkeun, muka dropdown nambihkeun mouseoverpanangan kosong ka barudak langsung <body>unsur. Hack anu diakui awon ieu diperyogikeun pikeun ngerjakeun quirk dina delegasi acara ios , anu bakal nyegah ketok dimana waé di luar dropdown tina pemicu kode anu nutup turunna. Sakali dropdown ditutup, pawang kosong tambahan mouseoverieu dihapus.

Via atribut data

Tambihkeun data-bs-toggle="dropdown"kana tautan atanapi tombol pikeun ngagentoskeun turunna.

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

Ngaliwatan JavaScript

Nelepon dropdowns via JavaScript:

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

`data-bs-toggle="dropdown"`masih diperlukeun

Paduli naha anjeun nelepon dropdown Anjeun liwat JavaScript atawa gantina ngagunakeun data-api, data-bs-toggle="dropdown"salawasna diperlukeun pikeun hadir dina elemen pemicu dropdown urang.

Pilihan

Salaku pilihan bisa diliwatan via atribut data atawa JavaScript, anjeun bisa append hiji ngaran pilihan pikeun data-bs-, sakumaha dina data-bs-animation="{value}". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina " camelCase " pikeun " kebab-case " nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, make data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Salaku Bootstrap 5.2.0, sadaya komponén ngarojong hiji atribut data ditangtayungan eksperimendata-bs-config nu bisa imah konfigurasi komponén basajan salaku string JSON. Lamun hiji unsur boga data-bs-config='{"delay":0, "title":123}'jeung data-bs-title="456"atribut, nilai final titlebakal 456jeung atribut data misah bakal override nilai dibikeun dina data-bs-config. Salaku tambahan, atribut data anu aya tiasa ngeusian nilai JSON sapertos data-bs-delay='{"show":0,"hide":150}'.

Ngaran	Tipe	Default	Katerangan
`autoClose`	boolean, string	`true`	Konpigurasikeun paripolah nutup otomatis tina dropdown: `true`- dropdown bakal ditutup ku ngaklik luar atawa jero menu dropdown. `false`- dropdown bakal ditutup ku ngaklik tombol toggle jeung nelepon manual `hide`atawa `toggle`métode. (Oge moal ditutup ku mencét `esc`kenop) `'inside'`- dropdown bakal ditutup (ngan) ku ngaklik jero menu dropdown. `'outside'`- dropdown bakal ditutup (ngan) ku ngaklik luar menu dropdown. Catetan: dropdown salawasna bisa ditutup ku `ESC`konci.
`boundary`	string, unsur	`'clippingParents'`	wates konstrain ngabahekeun tina menu dropdown (ngan lumaku pikeun Popper urang preventOverflow modifier). Sacara standar éta `clippingParents`sarta bisa nampa hiji rujukan HTMLElement (via JavaScript wungkul). Kanggo inpo nu leuwih lengkep tingal Popper urang detectOverflow docs .
`display`	senar	`'dynamic'`	Sacara standar, kami nganggo Popper pikeun posisi dinamis. Pareuman ieu sareng `static`.
`offset`	susunan, string, fungsi	`[0, 2]`	Offset tina dropdown relatif ka target na. Anjeun tiasa ngaliwat senar dina atribut data kalayan nilai anu dipisahkeun koma sapertos: `data-bs-offset="10,20"`. Nalika hiji fungsi dipaké pikeun nangtukeun offset, mangka disebut kalawan objék ngandung panempatan popper, rujukan, sarta popper rects salaku argumen kahijina. The triggering unsur DOM titik diliwatan salaku argumen kadua. fungsi kudu balik hiji Asép Sunandar Sunarya dua angka: skidding , jarak . Kanggo inpo nu leuwih lengkep tingal docs offset Popper urang .
`popperConfig`	null, objék, fungsi	`null`	Pikeun ngarobah konfigurasi Popper standar Bootstrap, tingali konfigurasi Popper . Nalika hiji fungsi dipaké pikeun nyieun konfigurasi Popper, mangka disebut kalawan obyék nu ngandung konfigurasi Popper standar Bootstrap urang. Éta ngabantosan anjeun nganggo sareng ngahijikeun standar sareng konfigurasi anjeun nyalira. fungsi kudu balik hiji objek konfigurasi pikeun Popper.
`reference`	string, unsur, objék	`'toggle'`	Unsur rujukan tina menu dropdown. Narima nilai `'toggle'`, `'parent'`, hiji rujukan HTMLElement atawa hiji obyék nyadiakeun `getBoundingClientRect`. Kanggo inpo nu leuwih lengkep tingal docs constructor Popper sarta docs elemen virtual .

Ngagunakeun fungsi kalawan`popperConfig`

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

Métode

Métode	Katerangan
`dispose`	Ngancurkeun dropdown hiji unsur. (Ngahapus data anu disimpen dina unsur DOM)
`getInstance`	Métode statik anu ngamungkinkeun anjeun kéngingkeun conto turun-handap anu aya hubunganana sareng unsur DOM, anjeun tiasa nganggo sapertos kieu: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Métode statik anu ngabalikeun conto dropdown anu aya hubunganana sareng unsur DOM atanapi ngadamel anu énggal upami henteu diinisialisasi. Anjeun tiasa nganggo sapertos kieu: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Nyumputkeun menu dropdown tina navbar atanapi navigasi tab.
`show`	Nembongkeun menu dropdown tina navbar dibikeun atawa navigasi tab.
`toggle`	Toggles menu dropdown tina navbar tinangtu atawa navigasi tab.
`update`	Ngamutahirkeun posisi turunna unsur.

Kajadian

Sadaya acara dropdown dipecat dina elemen toggling lajeng bubbled up. Janten anjeun ogé tiasa nambihan pamirsa acara dina .dropdown-menuunsur indungna. hide.bs.dropdownsarta hidden.bs.dropdownacara boga clickEventsipat (ngan lamun jenis Acara aslina nyaeta click) nu ngandung hiji Objék Acara pikeun acara klik.

Jenis acara	Katerangan
`hide.bs.dropdown`	Langsung hurung nalika `hide`metodeu instance geus disebut.
`hidden.bs.dropdown`	Dipecat nalika dropdown tos rengse disumputkeun ti pamaké sarta transisi CSS geus réngsé.
`show.bs.dropdown`	Kahuruan geuwat nalika `show`metoda conto disebut.
`shown.bs.dropdown`	Dipecat nalika turunna parantos katingali ku pangguna sareng transisi CSS parantos réngsé.

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

Dropdowns

Ihtisar

Aksesibilitas

Contona

Tombol tunggal

Tombol pamisah

Ukuran

dropdowns poék

Pitunjuk

RTL

Dipuseurkeun

Dropup

Dropup dipuseurkeun

Dropend

Dropstart

Item menu

Aktip

ditumpurkeun

alignment menu

alignment responsif

Pilihan alignment

eusi menu

lulugu

Pamisah

Téks

Bentuk

kabiasaan nutup otomatis

CSS

Variabel

variabel Sass

Campuran

Pamakéan

Via atribut data

Ngaliwatan JavaScript

`data-bs-toggle="dropdown"`masih diperlukeun

Pilihan

Ngagunakeun fungsi kalawan`popperConfig`

Métode

Kajadian

Dropdowns

Ihtisar

Aksesibilitas

Contona

Tombol tunggal

Tombol pamisah

Ukuran

dropdowns poék

Pitunjuk

RTL

Dipuseurkeun

Dropup

Dropup dipuseurkeun

Dropend

Dropstart

Item menu

Aktip

ditumpurkeun

alignment menu

alignment responsif

Pilihan alignment

eusi menu

lulugu

lulugu dropdown

Pamisah

Téks

Bentuk

Pilihan dropdown

kabiasaan nutup otomatis

CSS

Variabel

variabel Sass

Campuran

Pamakéan

Via atribut data

Ngaliwatan JavaScript

data-bs-toggle="dropdown"masih diperlukeun

Pilihan

Ngagunakeun fungsi kalawanpopperConfig

Métode

Kajadian

`data-bs-toggle="dropdown"`masih diperlukeun

Ngagunakeun fungsi kalawan`popperConfig`