Bootstrap - Dropdowns: A Beginner's Guide

Halo sana, para pengembang web masa depan! Hari ini, kita akan manduk ke dunia yang menakjubkan dari dropdown Bootstrap. Sebagai guru komputer yang ramah di lingkungan Anda, saya sangat gembira untuk mengantar Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis satu baris kode sebelumnya - kita akan mulai dari awal dan bangun secara bertahap. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Apa Itu Dropdown?

Sebelum kita masuk ke kode, mari bicarakan apa itu dropdown. Bayangkan Anda berada di restoran, dan pelayan memberikan Anda menu. Menu itu seperti dropdown - memberikan Anda daftar pilihan untuk dipilih. Dalam desain web, dropdown bekerja sama seperti itu. Mereka adalah cara kompak untuk menyajikan beberapa pilihan kepada pengguna tanpa mencemari halaman web Anda.

Dropdown Dasar

Mari kita mulai dengan dropdown yang paling dasar. Berikut ini adalah penampilannya dalam Bootstrap:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Tombol Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

mari kitauraikan ini:

1. Kita mulai dengan <div> dengan kelas dropdown. Ini adalah wadah kita.
2. Didalamnya, kita memiliki <button> yang memicu dropdown. Catat kelas dropdown-toggle dan atribut data-bs-toggle="dropdown".
3. <ul> dengan kelas dropdown-menu adalah konten dropdown yang sebenarnya.
4. Setiap <li> di dalam <ul> adalah item di menu dropdown kita.

Tombol Dropdown vs. Tautan Dropdown

Anda dapat membuat dropdown menggunakan tombol atau tautan. Berikut adalah perbedaan mereka:

Tombol Dropdown

Kita sudah melihat ini di contoh dasar kita. Itu menggunakan elemen <button>:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Tombol Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Item menu -->
</ul>
</div>

Tautan Dropdown

Untuk dropdown berdasarkan tautan, kita menggunakan tag <a>:

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Tautan Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- Item menu -->
</ul>
</div>

Perbedaan utama adalah elemen HTML yang digunakan (<button> vs. <a>), tapi mereka berfungsi sama.

Varian

Bootstrap menawarkan berbagai varian warna untuk dropdown Anda. Anda dapat mengganti kelas btn-secondary menjadi salah satu dari ini:

• btn-primary
• btn-success
• btn-info
• btn-warning
• btn-danger
• btn-light
• btn-dark

Misalnya:

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Berbahaya
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Item menu -->
</ul>
</div>

Tombol Split

Dropdown tombol split memisahkan aksi tombol dari tombol dropdown:

<div class="btn-group">
<button type="button" class="btn btn-primary">Aksi</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Item menu -->
</ul>
</div>

Di sini, mengklik bagian kiri tombol melakukan aksi, sedangkan bagian kanan membuka dropdown.

Ukuran

Anda dapat membuat dropdown lebih besar atau lebih kecil dengan menambahkan kelas btn-lg atau btn-sm:

Tombol Dropdown Besar

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Besar
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- Item menu -->
</ul>
</div>

Tombol Dropdown Kecil

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Kecil
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- Item menu -->
</ul>
</div>

Dropdown Gelap

Untuk dropdown dengan tema gelap, tambahkan kelas dropdown-menu-dark ke dropdown-menu:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Gelap
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- Item menu -->
</ul>
</div>

Arah

Bootstrap memungkinkan Anda mengubah arah dropdown Anda. Mari kita jelajahi opsi ini:

Dropdown Tengah

Untuk menengahkan menu dropdown, tambahkan kelas dropdown-center ke wadah:

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Tengah
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- Item menu -->
</ul>
</div>

Dropup

Untuk dropdown yang membuka ke atas, gunakan kelas dropup:

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<!-- Item menu -->
</ul>
</div>

Dropup Tengah

Gabungkan dropup dan dropdown-center untuk dropup yang ditengahkan:

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup Tengah
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- Item menu -->
</ul>
</div>

Dropend

Untuk dropdown yang membuka ke kanan, gunakan kelas dropend:

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- Item menu -->
</ul>
</div>

Dropstart

Untuk dropdown yang membuka ke kiri, gunakan kelas dropstart:

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- Item menu -->
</ul>
</div>

Item Menu

Sekarang, mari bicarakan apa yang masuk ke dalam menu dropdown Anda. Anda memiliki beberapa pilihan:

Header

Tambahkan header untuk mengelompokkan item menu:

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Header Dropdown</h6></li>
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
</ul>

Pemisah

Gunakan pemisah untuk memisahkan kelompok item menu yang berhubungan:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Teks

Anda juga dapat menambahkan teks non-interactive:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><span class="dropdown-item-text">Teks item dropdown</span></li>
</ul>

Form

Anda bahkan dapat menambahkan form di dalam dropdown:

<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Alamat Email</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Kata Sandi</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Kata Sandi">
</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">
Ingat saya
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Masuk</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Baru di sini? Daftar</a>
<a class="dropdown-item" href="#">Lupa kata sandi?</a>
</div>

Penyusunan Menu

Secara default, menu dropdown rata kiri. Anda dapat mengubah ini dengan kelas penyusunan:

Menu Rata Kanan

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Menu Rata Kanan
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- Item menu -->
</ul>
</div>

Penyusunan Responsif

Anda juga dapat membuat penyusunan responsif:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Kiri-aligned tapi rata kanan saat layar besar
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- Item menu -->
</ul>
</div>

Menu ini akan rata kiri secara default, tapi rata kanan pada layar besar dan keatas.

Opsi Dropdown

Dropdown Bootstrap datang dengan beberapa opsi tambahan:

Perilaku Tutup Otomatis

Anda dapat mengontrol bagaimana dropdown tutup dengan atribut data-bs-auto-close:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Klik di luar
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Item menu -->
</ul>
</div>

Opsi untuk data-bs-auto-close:

• true (default): Tutup dropdown saat mengklik di luar atau didalam dropdown
• false: Dropdown tidak akan tutup saat mengklik di luar atau didalam
• inside: Tutup dropdown saat mengklik didalam dropdown
• outside: Tutup dropdown saat mengklik di luar dropdown

Dan itu saja! Anda telah menyelesaikan perjalanan singkat ke dunia dropdown Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba contoh ini. Semoga dropdown Anda selalu membuka arah yang benar!

Credits: Image by storyset