Tutorial Bootstrap 4 #19 : Dropdown Bootstrap 4

Dropdown Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 di www.malasngoding.com.

Masih membahas tentang komponen-komponen dan plugin yang disediakan di bootstrap 4. komponen yang akan dibahas pada tutorial bootstrap 4 bagian ke 19 ini adalah komponen atau plugin Dropdown pada bootstrap.

Dropdown Bootstrap 4

Bootstrap telah menyediakan komponen dropdown. dan cara membuatnya pun cukup mudah. seperti komponen-komponen bootstrap 4 lainnya yang sudah kita bahas pada tutorial-tutorial bootstrap 4 sebelumnya.

Kita tinggal menggunakan class-class yang sudah tersedia.

Dropdown yang akan dibahas di sini seperti menu dropdown, namun bukan berbentuk menu navigasi, melainkan dibuat menggunakan tombol. jadi tombol yang akan kita buat memiliki navigasi dropdown.

Pada saat tombol tersebut diklik, maka akan menampilkan konten atau list link seperti menu dalam bentuk dropdown.

Dropdown pada bootstrap dibuat menggunakan library pihak ketiga, yaitu Popper.js.

Itulah sebabnya selain menghubungkan css dan js bootstrap, kita perlu meng-include atau menghubungkan juga popper.min.js ke halaman kerja kita.

Seperti yang sudah kita bahas pada Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4.

Langsung saja kita masuk ke contohnya.

Persiapan

Pastikan teman-teman sudah mengerti cara menghubungkan halaman dengan file css dan file js bootstrap 4.

Jika belum silahkan teman-teman baca tutorial sebelumnya dulu tentang cara menggunakan bootstrao 4.

Contoh kerangka kerja setelah dihubungkan dengan bootstrap, jquery dan popper.js.

Membuat Dropdown Dengan Bootstrap 4

Untuk membuat dropdown menggunakan tombol bootstrap, perhatikan contoh berikut.

Seperti contoh dropdown di atas, isi dari konten yang ingin teman-teman tampilkan pada bagian dropdown nya bisa teman-teman letakkan di dalam class .dropdown-menu seperti di atas, pada contoh ini isi konten dropdownnya kita isi dengan tiga buah link, yaitu HTML, Bootstrap 4 dan CodeIgniter.

Pemicu dropdownnya adalah tombol yang kita buat dengan elemen <button> .. </button>.

Teman-teman juga bisa menggunakan elemen <a> .. </a> jika mau.

Oke sekarang kita lihat hasilnya dulu. silahkan jalankan pada browser.

dropdown bootstrap 4

Contoh tombol di atas kita buat dengan class .btn-primary, sehingga warna tombolnya berwarna biru.

Silahkan teman-teman sesuaikan jika ingin diubah. untuk membuat tombol juga sudah kita pelajari pada tutorial sebelumnya, Silahkan baca lagi Tutorial Bootstrap 4 #14 : Tombol Bootstrap 4.

Berikut full source code nya.

Split Button Dropdown

Contoh tombol dropdown di atas adalah single button. Bootstrap juga menyediakan split button. jadi tombol akan terbagi 2 atau ada 2 tombol.

Tombol biasa dan tombol yang berbentuk panah, konten dropdownnya akan tampil jika yang diklik pada tombol panah. Perhatikan contoh berikut.

Dan hasilnya seperti berikut saat dijalankan.

split button dropdown bootstrap 4

Arah Konten

Contoh di atas akan menanpilkan konten ke arah bawah pada saat tombol di klik, kita juga bisa menentukan arah kontennya pada saat tampil ke kanan (dropright), kiri (dropleft), atas (dropup) atau bawah (dropdown).

Dropright

Untuk menampilkan konten di sebelah kanan, caranya tuliskan class .dropright pada bagian class .btn-group.

Contoh

Hasilnya

dropright

Dropleft

Untuk menampilkan konten di sebelah kanan, caranya tuliskan class .dropleft pada bagian class .btn-group.

Contoh

Hasilnya

dropleft

Dropup

Untuk menampilkan konten di sebelah kanan, caranya tuliskan class .dropup pada bagian class .btn-group.

Contoh

Hasilnya seperti berikut

dropup

Dropdown

Contoh

Hasilnya seperti berikut

dropdown

Penutup

Selangkapnya jika teman-teman ingin membaca lebih luas lagi tentang dropdown bootstrap 4, teman-teman bisa membacanya di sini https://getbootstrap.com/docs/4.3/components/dropdowns/.

Silahkan lihat demo dan download source codenya pada link berikut.

Download Source Code

Demo