Mungkin untuk teman-teman yang sering membuat website atau mencari tutorial tentang website mungkin framework yang satu ini sudah tidak asing lagi yaitu bootstrap, seperti yang kita ketahui bahwa bootstrap merupakan sebuah library framework dari CSS yang dibuat khusus untuk mengembangan sebuah website dari segi front-end website. Bootstrap juga menjadi salah satu framework HTML, CSS, dan Javascript yang cukup populer dikalangan web developer. Untuk saat ini hampir semua tampilan website menggunakan bootstrap karena bootstrap lebih mudah untuk dipahami, lebih cepat, dan memudahkan kita dalam membuat sebuah tampilan yang lebih responsive.

Pada bootstrap terdapat banyak fitur yang dapat kita gunakan untuk membuat tampilan yang lebih menarik dan responsive, untuk tutorial kali ini kita akan menggunakan sebuah fitur yang terdapat pada bootsrap yaitu navbar dan dropdown menu nah nantinya jika dapat mengabungkan dropdown kedalam navbar menunya, untuk hasil akhir yang akan kita buat nanti yaitu seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Oke teman-teman kita akan langsung saja Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap langkah pertama silahkan teman-teman buat sebuah file dengan nama index.html, selanjutnya silahkan teman-teman kunjungi website https://getbootstrap.com/. Kemudian silahkan teman-teman buat struktur html nya seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Berikutnya kita akan membuat untuk navbarnya silahkan teman-teman cari pada Documentation bootstrap navbar atau teman-teman bisa klik disini https://getbootstrap.com/docs/4.4/components/navbar/ kemudian silahkan teman-teman copy menu yang seperti dibawah ini pada text editornya :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :

Kemudian kita akan membuat tambahkan class container pada navbarnya seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Selanjutnya kita akan membuat untuk sub menu dropdownnya silahkan teman-teman ketikan pada documentation bootstrapnya dropdowns silahkan di scroll kebawah kita akan pilih Dropright seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Kita akan masukan pada bagian navbar menu yang terdapat dapat text editornya seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Pada menu Dropdown di atas jika kita klik maka akan muncul menu Dropright namun, jika Dropright kita klik maka menu berikutnya belum bisa muncul, nah kita akan custom untuk style cssnya kita akan tambahkan display: block; pada setiap class dropdown-menu seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Jika kita jalankan kembali pada browser maka akan terlihat hasilnya seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Pada menu diatas dapat kita lihat bahwa menu Droprightnya sudah dapat muncul, namun belum terdapat menu di dalam droprightnya, kita akan tambahkan menunya pada bagian Dropdown menu links seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Jika kita jalankan kembali pada browser maka menunya telah berhasil kita buat sepeti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Kemudian kita akan rubah class btn-group menjadi dropdown-item seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Selanjutnya kita kita akan rubah tag <button> yang terdapat pada dropright menjadi tag <a> dan untuk class btn kita juga rubah menjadi class nav-link seperti dibawah ini:

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Jika kita jalankan kembali pada browser maka akan terlihat hasilnya seperti dibawah ini :

Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap

Oke teman-teman itulah pembahasan kita pada tutorial Cara Mudah Membuat Sub Menu Dropdown Menggunakan Bootstrap.

Semoga bermanfaat.

Terima kasih.

WhatsApp chat