Dropdown

Alihkan overlay kontekstual untuk menampilkan daftar tautan dan lainnya dengan plugin dropdown Bootstrap.

Di halaman ini

Ringkasan

Dropdown adalah overlay kontekstual yang dapat dialihkan untuk menampilkan daftar tautan dan banyak lagi. Mereka dibuat interaktif dengan plugin JavaScript dropdown Bootstrap yang disertakan. Mereka dialihkan dengan mengklik, bukan dengan mengarahkan; ini adalah keputusan desain yang disengaja .

Dropdown dibuat di perpustakaan pihak ketiga, Popper , yang menyediakan penentuan posisi dinamis dan deteksi area pandang. Pastikan untuk menyertakan popper.min.js sebelum JavaScript Bootstrap atau gunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang berisi Popper. Popper tidak digunakan untuk memposisikan dropdown di navbars karena pemosisian dinamis tidak diperlukan.

Aksesibilitas

Standar WAI ARIA mendefinisikan role="menu"widget yang sebenarnya , tetapi ini khusus untuk menu seperti aplikasi yang memicu tindakan atau fungsi. Menu ARIA hanya dapat berisi item menu, item menu kotak centang, item menu tombol radio, grup tombol radio, dan submenu.

Dropdown Bootstrap, di sisi lain, dirancang untuk menjadi generik dan berlaku untuk berbagai situasi dan struktur markup. Misalnya, dimungkinkan untuk membuat dropdown yang berisi input tambahan dan kontrol formulir, seperti bidang pencarian atau formulir login. Untuk alasan ini, Bootstrap tidak mengharapkan (atau secara otomatis menambahkan) salah satu roledan aria-atribut yang diperlukan untuk menu ARIA yang sebenarnya. Penulis harus memasukkan atribut yang lebih spesifik ini sendiri.

Namun, Bootstrap menambahkan dukungan bawaan untuk sebagian besar interaksi menu keyboard standar, seperti kemampuan untuk berpindah melalui .dropdown-itemelemen individual menggunakan tombol kursor dan menutup menu dengan ESCtombol tersebut.

Contoh

Bungkus sakelar tarik-turun (tombol atau tautan Anda) dan menu tarik-turun di dalam .dropdown, atau elemen lain yang menyatakan position: relative;. Dropdown dapat dipicu dari <a>atau <button>elemen agar lebih sesuai dengan kebutuhan potensial Anda. Contoh yang ditampilkan di sini menggunakan <ul>elemen semantik jika sesuai, tetapi markup khusus didukung.

Tombol tunggal

Single apa pun .btndapat diubah menjadi sakelar tarik-turun dengan beberapa perubahan markup. Inilah cara Anda dapat membuatnya bekerja dengan salah satu <button>elemen:

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>

Dan dengan <a>elemen:

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 terbaiknya adalah Anda juga dapat melakukan ini dengan varian tombol apa pun:

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

Demikian pula, buat dropdown tombol terpisah dengan markup yang hampir sama dengan dropdown tombol tunggal, tetapi dengan penambahan .dropdown-toggle-splitspasi yang tepat di sekitar tanda sisipan dropdown.

Kami menggunakan kelas ekstra ini untuk mengurangi horizontal paddingdi kedua sisi tanda sisipan sebesar 25% dan menghapus margin-leftyang ditambahkan untuk dropdown tombol biasa. Perubahan ekstra itu menjaga tanda sisipan tetap di tengah tombol split dan memberikan area hit berukuran lebih tepat di sebelah 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>

Perekat

Dropdown tombol berfungsi dengan tombol dari semua ukuran, termasuk tombol dropdown default dan split.

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

Dropdown gelap

Pilih dropdown yang lebih gelap untuk mencocokkan navbar gelap atau gaya kustom dengan menambahkan .dropdown-menu-darkke file .dropdown-menu. Tidak ada perubahan yang diperlukan untuk item dropdown.

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>

Dan menggunakannya di 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>

Petunjuk arah

RTL

Arah dicerminkan saat menggunakan Bootstrap di RTL, artinya .dropstartakan muncul di sisi kanan.

Terpusat

Jadikan menu tarik-turun di tengah di bawah sakelar dengan .dropdown-centerpada elemen induk.

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>

Drop-up

Picu menu tarik-turun di atas elemen dengan menambahkan .dropupke elemen induk.

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

Berpusat pada drop-up

Jadikan menu tarik-turun di tengah di atas sakelar dengan .dropup-centerpada elemen induk.

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

Picu menu tarik-turun di sebelah kanan elemen dengan menambahkan .dropendke elemen induk.

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

Picu menu tarik-turun di sebelah kiri elemen dengan menambahkan .dropstartke elemen induk.

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

Anda dapat menggunakan <a>atau <button>elemen sebagai 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>

Anda juga dapat membuat item tarik-turun non-interaktif dengan .dropdown-item-text. Jangan ragu untuk bergaya lebih jauh dengan CSS khusus atau utilitas teks.

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>

Aktif

Tambahkan .activeke item di dropdown untuk menatanya sebagai aktif . Untuk menyampaikan status aktif ke teknologi bantu, gunakan aria-currentatribut — menggunakan pagenilai untuk halaman saat ini, atau trueuntuk item saat ini dalam satu 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>

Dengan disabilitas

Tambahkan .disabledke item di tarik-turun untuk menatanya sebagai dinonaktifkan .

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>

Secara default, menu dropdown secara otomatis diposisikan 100% dari atas dan di sepanjang sisi kiri induknya. Anda dapat mengubah ini dengan .drop*kelas terarah, tetapi Anda juga dapat mengontrolnya dengan kelas pengubah tambahan.

Tambahkan .dropdown-menu-endke a .dropdown-menuuntuk meratakan kanan menu tarik-turun. Arah dicerminkan saat menggunakan Bootstrap di RTL, artinya .dropdown-menu-endakan muncul di sisi kiri.

Perhatian! Dropdown diposisikan berkat Popper kecuali ketika mereka berada di 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>

Penyelarasan responsif

Jika Anda ingin menggunakan perataan responsif, nonaktifkan pemosisian dinamis dengan menambahkan data-bs-display="static"atribut dan gunakan kelas variasi responsif.

Untuk menyelaraskan menu tarik-turun ke kanan dengan titik henti sementara yang diberikan atau lebih besar, tambahkan.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>

Untuk menyelaraskan kiri menu tarik-turun dengan titik henti sementara yang diberikan atau lebih besar, tambahkan .dropdown-menu-enddan .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>

Perhatikan bahwa Anda tidak perlu menambahkan data-bs-display="static"atribut ke tombol dropdown di navbars, karena Popper tidak digunakan di navbars.

Opsi perataan

Mengambil sebagian besar opsi yang ditunjukkan di atas, inilah demo wastafel dapur kecil dari berbagai opsi perataan dropdown di satu 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>

Header

Tambahkan tajuk untuk memberi label pada bagian tindakan di menu tarik-turun mana pun.

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>

Jangka pembagi garis

Pisahkan kelompok item menu terkait dengan pembagi.

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>

Teks

Tempatkan teks bentuk bebas apa pun dalam menu tarik-turun dengan teks dan gunakan utilitas spasi . Perhatikan bahwa Anda mungkin memerlukan gaya ukuran tambahan untuk membatasi lebar 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>

Formulir

Letakkan formulir di dalam menu tarik-turun, atau buat menjadi menu tarik-turun, dan gunakan utilitas margin atau padding untuk memberikan ruang negatif yang Anda butuhkan.

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>

Gunakan data-bs-offsetatau data-bs-referenceuntuk mengubah lokasi tarik-turun.

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>

Perilaku tutup otomatis

Secara default, menu dropdown ditutup saat mengklik di dalam atau di luar menu dropdown. Anda dapat menggunakan autoCloseopsi untuk mengubah perilaku dropdown ini.

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

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, dropdown sekarang menggunakan variabel CSS lokal .dropdown-menuuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

  --#{$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 melalui variabel CSS dapat dilihat pada .dropdown-menu-darkkelas di mana kita mengganti nilai tertentu tanpa menambahkan pemilih CSS duplikat.

  --#{$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 untuk semua 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

Variabel untuk dropdown gelap :

$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 untuk tanda sisipan berbasis CSS yang menunjukkan interaktivitas dropdown:

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

campuran

Mixin digunakan untuk menghasilkan tanda sisipan berbasis CSS dan dapat ditemukan di 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;
    }
  }
}

Penggunaan

Melalui atribut data atau JavaScript, plugin dropdown mengaktifkan konten tersembunyi (menu dropdown) dengan mengaktifkan .showkelas pada parent .dropdown-menu. Atribut data-bs-toggle="dropdown"ini diandalkan untuk menutup menu tarik-turun di tingkat aplikasi, jadi sebaiknya selalu menggunakannya.

Pada perangkat yang mendukung sentuhan, membuka tarik-turun menambahkan mouseoverpenangan kosong ke turunan langsung dari <body>elemen. Peretasan yang diakui jelek ini diperlukan untuk mengatasi kekhasan dalam delegasi acara iOS , yang jika tidak, akan mencegah ketukan di mana pun di luar dropdown memicu kode yang menutup dropdown. mouseoverSetelah dropdown ditutup, penangan kosong tambahan ini akan dihapus.

Melalui atribut data

Tambahkan data-bs-toggle="dropdown"ke tautan atau tombol untuk mengaktifkan tarik-turun.

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

Melalui JavaScript

Panggil dropdown melalui JavaScript:

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

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

Terlepas dari apakah Anda memanggil dropdown Anda melalui JavaScript atau sebagai gantinya menggunakan data-api, data-bs-toggle="dropdown"selalu harus ada di elemen pemicu dropdown.

Pilihan

Karena opsi dapat diteruskan melalui atribut data atau JavaScript, Anda dapat menambahkan nama opsi ke data-bs-, seperti pada data-bs-animation="{value}". Pastikan untuk mengubah jenis huruf dari nama opsi dari “ camelCase ” menjadi “ kebab-case ” saat meneruskan opsi melalui atribut data. Misalnya, gunakan data-bs-custom-class="beautifier"alih-alih data-bs-customClass="beautifier".

Pada Bootstrap 5.2.0, semua komponen mendukung atribut data cadangan eksperimentaldata-bs-config yang dapat menampung konfigurasi komponen sederhana sebagai string JSON. Ketika suatu elemen memiliki data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang terpisah akan menimpa nilai yang diberikan pada data-bs-config. Selain itu, atribut data yang ada dapat menampung nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Nama	Jenis	Bawaan	Keterangan
`autoClose`	boolean, string	`true`	Konfigurasikan perilaku tutup otomatis dari dropdown: `true`- dropdown akan ditutup dengan mengklik di luar atau di dalam menu dropdown. `false`- dropdown akan ditutup dengan mengklik tombol sakelar dan memanggil `hide`atau `toggle`metode secara manual. (Juga tidak akan ditutup dengan menekan `esc`tombol) `'inside'`- dropdown akan ditutup (hanya) dengan mengklik di dalam menu dropdown. `'outside'`- dropdown akan ditutup (hanya) dengan mengklik di luar menu dropdown. Catatan: dropdown selalu dapat ditutup dengan `ESC`kunci.
`boundary`	string, elemen	`'clippingParents'`	Batas batasan overflow dari menu dropdown (hanya berlaku untuk pengubah preventOverflow Popper). Secara default itu `clippingParents`dan dapat menerima referensi HTMLElement (hanya melalui JavaScript). Untuk informasi lebih lanjut, lihat dokumen detectOverflow Popper .
`display`	rangkaian	`'dynamic'`	Secara default, kami menggunakan Popper untuk penentuan posisi dinamis. Nonaktifkan ini dengan `static`.
`offset`	array, string, fungsi	`[0, 2]`	Offset dari dropdown relatif terhadap targetnya. Anda dapat meneruskan string dalam atribut data dengan nilai yang dipisahkan koma seperti: `data-bs-offset="10,20"`. Ketika sebuah fungsi digunakan untuk menentukan offset, itu dipanggil dengan objek yang berisi penempatan popper, referensi, dan popper rect sebagai argumen pertamanya. Node DOM elemen pemicu dilewatkan sebagai argumen kedua. Fungsi harus mengembalikan array dengan dua angka: skidding , distance . Untuk informasi lebih lanjut, lihat dokumen offset Popper .
`popperConfig`	null, objek, fungsi	`null`	Untuk mengubah konfigurasi Popper default Bootstrap, lihat Konfigurasi Popper . Ketika sebuah fungsi digunakan untuk membuat konfigurasi Popper, itu dipanggil dengan objek yang berisi konfigurasi Popper default Bootstrap. Ini membantu Anda menggunakan dan menggabungkan default dengan konfigurasi Anda sendiri. Fungsi harus mengembalikan objek konfigurasi untuk Popper.
`reference`	string, elemen, objek	`'toggle'`	Elemen referensi dari menu tarik-turun. Menerima nilai `'toggle'`, `'parent'`, referensi HTMLElement atau objek yang menyediakan `getBoundingClientRect`. Untuk informasi lebih lanjut, lihat dokumen konstruktor Popper dan dokumen elemen virtual .

Menggunakan fungsi dengan`popperConfig`

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

Metode

metode	Keterangan
`dispose`	Menghancurkan dropdown elemen. (Menghapus data yang tersimpan pada elemen DOM)
`getInstance`	Metode statis yang memungkinkan Anda untuk mendapatkan instance dropdown yang terkait dengan elemen DOM, Anda dapat menggunakannya seperti ini: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Metode statis yang mengembalikan instance dropdown yang terkait dengan elemen DOM atau membuat yang baru jika tidak diinisialisasi. Anda dapat menggunakannya seperti ini: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Menyembunyikan menu tarik-turun dari bilah navigasi atau navigasi tab tertentu.
`show`	Menampilkan menu tarik-turun dari bilah navigasi atau navigasi tab tertentu.
`toggle`	Mengalihkan menu tarik-turun dari bilah navigasi atau navigasi tab tertentu.
`update`	Memperbarui posisi dropdown elemen.

Acara

Semua peristiwa dropdown ditembakkan ke elemen toggling dan kemudian digelembungkan. Jadi, Anda juga dapat menambahkan pendengar acara pada .dropdown-menuelemen induk 's. hide.bs.dropdowndan hidden.bs.dropdownacara memiliki clickEventproperti (hanya jika jenis Acara asli adalah click) yang berisi Objek Acara untuk acara klik.

Jenis acara	Keterangan
`hide.bs.dropdown`	Diaktifkan segera ketika `hide`metode instance telah dipanggil.
`hidden.bs.dropdown`	Diaktifkan ketika dropdown telah selesai disembunyikan dari pengguna dan transisi CSS telah selesai.
`show.bs.dropdown`	Diaktifkan segera saat `show`metode instance dipanggil.
`shown.bs.dropdown`	Diaktifkan ketika dropdown telah dibuat terlihat oleh pengguna dan transisi CSS telah selesai.

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

Dropdown

Ringkasan

Aksesibilitas

Contoh

Tombol tunggal

Tombol split

Perekat

Dropdown gelap

Petunjuk arah

RTL

Terpusat

Drop-up

Berpusat pada drop-up

Dropend

Dropstart

Item menu

Aktif

Dengan disabilitas

Perataan menu

Penyelarasan responsif

Opsi perataan

konten menu

Header

Jangka pembagi garis

Teks

Formulir

Perilaku tutup otomatis

CSS

Variabel

Variabel Sass

campuran

Penggunaan

Melalui atribut data

Melalui JavaScript

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

Pilihan

Menggunakan fungsi dengan`popperConfig`

Metode

Acara

Dropdown

Ringkasan

Aksesibilitas

Contoh

Tombol tunggal

Tombol split

Perekat

Dropdown gelap

Petunjuk arah

RTL

Terpusat

Drop-up

Berpusat pada drop-up

Dropend

Dropstart

Item menu

Aktif

Dengan disabilitas

Perataan menu

Penyelarasan responsif

Opsi perataan

konten menu

Header

Tajuk tarik-turun

Jangka pembagi garis

Teks

Formulir

Opsi tarik-turun

Perilaku tutup otomatis

CSS

Variabel

Variabel Sass

campuran

Penggunaan

Melalui atribut data

Melalui JavaScript

data-bs-toggle="dropdown"masih diperlukan

Pilihan

Menggunakan fungsi denganpopperConfig

Metode

Acara

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

Menggunakan fungsi dengan`popperConfig`