Tutorial Belajar Bootstrap 4 Part 18 – Membuat Menu Navigasi dengan Bootstrap

Selamat datang di warung belajar, masih dalam seri tutorial bootstrap 4, dalam tutorial ini kita akan membahas mengenai pembuatan menu navigasi dengan bootstrap, menu navigasi adalah hal yang cukup penting dalam pembuatan aplikasi berbasis web, bootstrap 4 memberikan beberapa class yang bisa digunakan untuk membuat navigasi dengan tampilan yang menarik, baik  langsung saja kita mulai pembahasannya.

Cara membuat menu navigasi

Untuk membuat menu navigasi anda bisa menggunakan tag <nav> lalu menambahkan class .navbar didalam tag tersebut, selain itu anda juga bisa menambahkan class expand-xl, expand-lg, expand-md, expand-sm (Class ini digunakan untuk mengatur menu navigasi agar tampil secara vertical ketika diakses dengan ukuran layar tertentu ) untuk pembahasan ukuran layar silahkan melihat di tutorial kami sebelumnya mengenal grid system pada bootstrap.

jadi semisal nih kita menambahkan navbar-expand-lg, sesuai aturan grid system lg itu digunakan untuk device ukuran besar, dengan ukuran lebar 992 pixel atau lebih, maka jika kita berikan class navbar-expand-lg pada menu navigasi, menu tersebut akan menjadi vertical ketika diakses menu dibawah ukuran 992 pixel.

Untuk contoh pembuatan menu navigasi perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama basic_navbar.html, lalu kita buka di browser maka hasilnya adalah :

Jika diakses dengan ukuran kurang dari 992 pixel maka menu navigasi menjadi vertical.

Keterangan :

• Untuk membuat navigasi silahkan buat tag <nav> dan tambahkan class navbar, perhatikan line 14
• tambahkan juga class .navbar-expand-lg untuk membuat menu navigasi dengan tampilan horizontal, anda bisa mengganti dengan class lain seperti class expand-xl, expand-md, expand-sm silahkan sesuaikan dengan pengaturan tampilan seperti yang telah dijelaskan dibagian sebelumnya
• pada line 14 jika anda tidak menambahkan class navbar-expand-lg maka menu navigasi akan ditampilkan secara vertical bukan horizontal
• lalu berikutnya anda bisa mengatur warna pada navigasi yang diinginkan dalam contoh diatas di line 14 kita tambahkan class .bg-dark sehingga warna navigasinya adalah hitam, anda juga mengganti dengan warna, detailnya nanti kita bahas di bagian selanjutnya.
• berikutnya silahkan buat tag <ul> dan tambahkan class .navbar-nav perhatikan line 15
• didalam tag <ul> tambahkan tag <li> dengan tambahakan class nav-item perhatikan pada line 16,19,22
• didalam tag <li> tambahkan tag <a> dan tambahkan class nav-link perhatikan pada line 17, 20, 23
• perhatikan line 26 kita menuliskan tag <span> dan memberikan class navbar-text untuk memberikan text pada bagian menu navigasi, serta kita tambahkan class text-white untuk memberikan warna putih pada text tersebut

 

 

Merubah Warna Menu Navigasi

Untuk merubah warna pada menu navigasi anda bisa menambahkan class yang disediakan oleh bootstrap untuk merubah warna menu navigasi, tambahkan class tersebut pada tag <nav>, classnya antara lain adalah :

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light

Baik untuk contoh penggunaannya adalah sebagai berikut :

Semisal kita simpan dengan nama warna_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

• Menu navigasi akan ditampilkan sesuai dengan class warna yang ditambahkan pada tag <nav>, perhatikan penggunaan class tersebut di line 14,31, 48, 65, 82, 99, 116, dan 133
• pada tag <nav> kita berikan class navbar-dark agar text pada menu berubah yang sebelumnya berwarna biru menjadi warna gelap
• anda juga bisa memberikan class active pada tag <ul> untuk memberikan highlight pada link yang diinginkan
• anda juga bisa memberikan class disaled pada tag <a> untuk mendisabled pada bagian link

 

 

Menambahkan Logo pada menu navigasi

Anda juga bisa menambahkan logo pada menu navigasi yang anda buat, caranya dengan menambahkan class navbar-brand, baik untuk contoh perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama logo_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• Untuk membuat logo pada menu navigasi anda perlu membuat sebuah tag <a> dan menambahkan class navbar-brand seperti pada line 15, lalu silahkan buat tag <img> untuk memberikan gambar pada menu navigasi seperti pada line 15, jika anda mengetahui bagaimana cara menambahkan gambar pada html silahkan baca artikel kami mengenai cara menambahkan gambar dengan HTML

 

 

Menambahkan Collapse pada menu navigasi

Anda juga dapat menambahkan fitur collapse pada menu navigasi yang anda buat dengan bootstrap, baik langsung saja contoh penggunaan collapse pada menu navigasi adalah sebagai berikut :

Semisal kita simpan dengan nama collapse_navbar.html, jika dibuka di browser maka hasilnya adalah :

Keterangan :

• Untuk membuat collapse pada bagian menu navigasi buatlah <button>, tambahkan class navbar-toggler, lalu tambahkan attribute data–toggle dengan value collapse,  dan tambahkan attribute data-target=’#nama-id’ nama id disini isikan sesuai dengan nama id yang digunakan pada bagian menu yang ingin ditampilkan secara collapse ketika tombol di klik, dalam contoh ini kita tuliskan nama id adalah kumpulan_menu, perhatikan line 15
• diantara dari <button> </button> kita tuliskan tag <span> dengan class navbar-toggler-icon, untuk membuat icon pada bagian collapse, perhatikan line 16
• berikutnya buat tag <div> sebelum tag <ul> dan tambahkan class collapse dan class navbar-collapse, dan tambahkan id yang sesuai dengan value pada attribute data-target, karena itu disini kita tambahkan id dengan nama kumpulan_menu, perhatikan pada line 18

 

 

Membuat Dropdown pada Menu Navigasi

Dalam bagian ini kita akan  membahas mengenai cara menambahkan Dropdown pada menu navigasi, untuk contoh perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama dropdown_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

• untuk membuat dropdown tambahkan class dropdown pada tag <li> perhatikan line 27
• lalu tambahkan menu sebagai pemicu dropdown menu, dengan membuat tag <a> dan tambahkan class dropdown-toggle, lalu tambahkan id semisal dengan nama navbardrop, dan tambahkan attribute data-toogle dengan value dropdown, perhatikan line 28
• Berikutnya buatlah tag <div> yang digunakan untuk membuat dropdown menunya, tambahkan class dropdown-menu perhatikan pada line 31
• didalam tag <div> anda dapat menuliskan link dengan menggunakan tag <a> dan tambahkan class dropdown-item, perhatikan line 32 – 34

 

 

Menambahkan form dan tombol pada menu navigasi

Anda juga bisa menambahkan form dan tombol pada menu navigasi, anda bisa memanfaatkan hal ini untuk membuat beberapa hal semisal form pencarian pada bagian menu navigasi, untuk contohnya perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama form_pada_menu_navigasi.html, lalu kita buka di browser maka hasilnya :

Keterangan :

• Perhatikan pada line 25 kita menambahkan form dengan class form-inline, lalu silahkan tambahkan field untuk bagian formnya, dan tombol.

 

 

Membuat Fixed Navigation

Fixed Navigation adalah istilah untuk membuat menu navigasi yang fixed berada dibagian tertentu meskipun browser di scroll, untuk contoh pembuatannya adalah seperti berikut ini :

Semisal kita simpan dengan nama fixed_top_navbar.html, lalu kita buka di browser maka hasilnya :

dan ketika di scroll maka hasilnya adalah seperti berikut ini :

Keterangan :

• Pada bagian navbar kita berikan class fixed-top pada line 14, karena itu ketika di scroll maka navbar akan static dibagian atas, jika anda ingin fixednya dibagian bawah maka tambahkan class fixed-bottom

 

 

Membuat Sticky Top pada navigasi menu

Sticky top disini maksudnya adalah menu navigasi ketika di scroll akan berada diatas sama seperti konsep fixed-top, hanya saja untuk posisi menu navigasi awalnya tidak berada diatas, tapi ditengah konten.

untuk contoh skripnya adalah seperti berikut ini :

Semisal kita simpan dengan nama sticky_top_menu_navigasi.html, lalu kita buka di browser maka hasilnya adalah :

Posisi dari menu berada dibagian tengah, tetapi ketika di scroll maka hasilnya menu navigasi akan tertahan dibagian atas.

Keterangan :

kita menambahkan class sticky-top pada tag <nav> coba perhatikan di Line 18, karena itu posisi menu navigasi akan sticky top ketika dilakukan scroll

 

Baik sekian dulu teman – teman pembahasan mengenai bagaimana cara membuat menu navigasi dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa ditutorial bootstrap 4 selajutnya.