Bootstrap 4 Dropdown
Dropdown Dasar
Menu tarik-turun adalah menu yang dapat dialihkan yang memungkinkan pengguna memilih satu nilai dari daftar yang telah ditentukan sebelumnya:
Contoh
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Contoh Dijelaskan
Kelas .dropdownmenunjukkan menu tarik-turun.
Untuk membuka menu tarik-turun, gunakan tombol atau tautan dengan kelas .dropdown-toggledan
data-toggle="dropdown"atribut.
Tambahkan .dropdown-menukelas ke <div>elemen untuk benar-benar membangun menu tarik-turun. Kemudian tambahkan
.dropdown-itemkelas ke setiap elemen (tautan atau tombol) di dalam menu tarik-turun.
Pembagi Dropdown
Kelas .dropdown-dividerdigunakan untuk memisahkan tautan di dalam menu tarik-turun dengan batas horizontal tipis:
Contoh
<div class="dropdown-divider"></div>
Tajuk tarik-turun
Kelas .dropdown-headerdigunakan untuk menambahkan header di dalam menu dropdown:
Contoh
<div class="dropdown-header">Dropdown header 1</div>
Nonaktifkan dan Aktif item
Sorot item dropdown tertentu dengan .activekelas (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):
Contoh
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Posisi Dropdown
Anda juga dapat membuat menu "dropright" atau "dropleft", dengan menambahkan kelas .droprightor .dropleftke elemen dropdown. Perhatikan bahwa tanda sisipan/panah ditambahkan secara otomatis:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Menu tarik-turun Kanan
Untuk meratakan kanan menu dropdown, tambahkan .dropdown-menu-rightkelas ke elemen dengan .dropdown-menu:
Contoh
<div class="dropdown-menu dropdown-menu-right">
Drop-up
Jika Anda ingin menu tarik-turun meluas ke atas alih-alih ke bawah, ubah elemen <div> dengan class="dropdown" menjadi "dropup":
Contoh
<div class="dropup">
Teks Dropdown
Kelas .dropdown-item-textdigunakan untuk menambahkan teks biasa ke item tarik-turun, atau digunakan pada tautan untuk gaya tautan default.
Contoh
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Tombol yang Dikelompokkan dengan Dropdown
Contoh
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Dropdown Tombol Split
Contoh
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Grup Tombol Vertikal dengan Dropdown
Contoh
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Referensi Dropdown Bootstrap 4 Lengkap
Untuk referensi lengkap tentang semua opsi, metode, dan acara dropdown, buka Referensi Dropdown Bootstrap 4 JS kami .