Dropdown Bootstrap

Dropdown Dasar

Menu tarik-turun adalah menu yang dapat dialihkan yang memungkinkan pengguna memilih satu nilai dari daftar yang telah ditentukan sebelumnya:

Contoh Dijelaskan

Kelas .dropdownmenunjukkan menu tarik-turun.

Untuk membuka menu tarik-turun, gunakan tombol atau tautan dengan kelas .dropdown-toggledan data-toggle="dropdown"atribut.

Kelas .caretmembuat ikon panah tanda sisipan (), yang menunjukkan bahwa tombol tersebut adalah dropdown.

Tambahkan .dropdown-menukelas ke <ul>elemen untuk benar-benar membangun menu tarik-turun.

Pembagi Dropdown

Kelas .dividerdigunakan untuk memisahkan tautan di dalam menu tarik-turun dengan batas horizontal tipis:

Tajuk tarik-turun

Kelas .dropdown-headerdigunakan untuk menambahkan header di dalam menu dropdown:

Nonaktifkan dan Aktif item

Sorot item dropdown tertentu dengan kelas .active (menambahkan warna latar belakang biru).

Untuk menonaktifkan item di menu tarik-turun, gunakan .disabledkelas (mendapat warna teks abu-abu muda dan ikon "tanda dilarang parkir" saat mengarahkan kursor):

Posisi Dropdown

Untuk meratakan kanan dropdown, tambahkan .dropdown-menu-rightkelas ke elemen dengan .dropdown-menu:

Drop-up

Jika Anda ingin menu tarik-turun meluas ke atas alih-alih ke bawah, ubah elemen <div> dengan class="dropdown" menjadi "dropup":

Aksesibilitas Dropdown

Untuk membantu meningkatkan aksesibilitas bagi orang yang menggunakan pembaca layar, Anda harus menyertakan atribut roledan berikut ini aria-*, saat membuat menu tarik-turun:

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Referensi Dropdown Bootstrap Lengkap

Untuk referensi lengkap tentang semua opsi, metode, dan acara dropdown, buka Referensi Dropdown Bootstrap JS kami .