Bootstrap - Dropdowns: A Beginner's Guide

Halo sana, para pengembang web masa depan! Hari ini, kita akan mandulkan diri ke dunia yang menakjubkan dropdown Bootstrap. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk mengorbitasi Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan memulai dari awal dan membangunnya 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 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 banyak pilihan kepada pengguna tanpa membanjiri halaman web Anda.

Dropdown Dasar

Mari kita mulai dengan dropdown yang paling dasar. Ini adalah bagaimana itu terlihat 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. Dalamnya, kita memiliki <button> yang memicu dropdown. Perhatikan kelas dropdown-toggle dan atribut data-bs-toggle="dropdown".
3. <ul> dengan kelas dropdown-menu adalah konten dropdown kita.
4. Setiap <li> di dalam <ul> adalah item di dalam menu dropdown kita.

Tombol Dropdown vs. Tautan Dropdown

Anda dapat membuat dropdown menggunakan tombol atau tautan. Mari lihat perbedaannya:

Tombol Dropdown

Kita sudah melihat ini dalam 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 mengubah 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 toggle 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 ber tema gelap, tambahkan kelas dropdown-menu-dark ke dropdown-menu Anda:

<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 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 opsi:

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 menyertakan 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 menyertakan form di dalam dropdown Anda:

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

Penyelarasan Menu

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

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>

Penyelarasan Responsif

Anda juga dapat membuat penyelarasan responsif:

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

Menu dropdown ini akan rata kiri secara default, tapi rata kanan pada layar besar dan ke atas.

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 diluar
</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 dalam dropdown
• false: Dropdown tidak akan tutup saat mengklik di luar atau dalam
• inside: Tutup dropdown saat mengklik dalam dropdown
• outside: Tutup dropdown saat mengklik di luar dropdown

Dan itu saja! Anda telah menyelesaikan perjalanan singkat melalui dropdown Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba contoh ini. Selamat coding, dan semoga dropdown Anda selalu membuka arah yang benar!

Credits: Image by storyset