Membuat Navbar dengan Bootstrap 4 dengan Mudah

Cara Membuat Navbar dengan Bootstrap 4 dengan Mudah – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan menjelaskan tentang cara membuat navbar menggunakan bootstrap 4. Seelah saya sebelumnya membahas tentang nav menu kali ini kita akan belajar membuat navbar. Navbar biasanya ada pada header suatu website dan akan jadi menu navigasi yang berisi menu-menu dan juga logo dari website. Navbar juga bisa dibuat fixed top atau posisinya akan selalu diatas walaupun telah discroll atau fixed bottom atau posisiya akan selalu dibawah jika discroll.

Cara membuatnya sangat mudah. Kita tidak perlu lagi membuat cssnya karena semua sudah dibuat oleh bootstrap, kita hanya perlu memasukkan librari css dari bootstrap. Berikut macam-macam navbar namun sebelum membuat contoh dibawah ini sobat perlu memasukkan kode css dan javascript terlebih dahulu pada tag <head>. Kodenya adalah sebagai berikut

Pastikan project sobat sudah tersedia semua plugin css dan js diatas karena jika tidak ada salah satu maka akan menyebabkan tidak berjalannya navbar seperti pada contoh ini. Karena untuk kepentingan demo jadi saya menggunakan css dan js online namun jika sobat ingin membuatnya untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu atau bisa sobat download bersama project pada postingan ini di akhir postingan. Untuk warnanya adalah warna standar bawaan dari bootstrap bisa sobat ganti sesuai keinginan sobat.

1. Brand Website

Pada contoh pertama kita akan membahas tentang brand dari suatu website yang bisa sebuah gambar/logo, tulisan atau logo dan tulisan. Contoh penggunaannya adalah sebagai berikut

Kode diatas akan menghasilkan tampilan seperti dibawah

2. Standar Navbar

Jika kita menggunakan navbar bawaan bootstrap ini sudah otomatis responsive design jadi kita tidak perlu repot-repot untuk membuat tampilan di segala gadget yang digunakan. Contoh penggunaannya adalah sebagai berikut

Hasilnya pada tampilan laptop

Hasilnya jika dibuka menggunakan smartphone seperti hp/tab

 

3. Navbar Align Right

Untuk contoh diatas, menu-menunya ada di sebelah kiri. Namun kita bisa juga membuatnya di sebelah kanan yaitu seperti berikut

Hasilnya pada tampilan laptop

Hasilnya jika dibuka menggunakan smartphone seperti hp/tab

 

4. Navbar dengan Dropdownlink

Kita juga bisa menambahkan dropdownlink pada navbar yang menamdakan sub menu dari menu yang ada. Contoh penggunaannya adalah sebagai berikut

Hasilnya pada tampilan laptop

Hasilnya jika dibuka menggunakan smartphone seperti hp/tab

 

5. Navbar dengan tambahan teks

Kita juga bisa menggabungkan dengan elemen html lainnya seperti teks pada navbar. Contohnya yaitu

Hasilnya pada tampilan laptop

Hasilnya jika dibuka menggunakan smartphone seperti hp/tab

 

6. Navbar dengan form search

Navbar juga bisa digabungkan dengan menu search seperti dibawah

Hasilnya pada tampilan laptop

Hasilnya jika dibuka menggunakan smartphone seperti hp/tab

 

7. Navbar Dengan Toggle di Sebalah Kanan dan Brand Sebelah kiri

Tampilan ini jika dibuka di laptop akan menghasilkan tampilan yang sama namun jika dibuka di smartphone akan berbeda, lihat contoh dibawah

Hasilnya pada tampilan laptop

Hasilnya jika dibuka menggunakan smartphone seperti hp/tab

8. Brand Tidak Terlihat dalam Mode Responsive Design

Contoh dibawah sama saat tampilan di laptop tidak ada bedanya namun jika dibuka di smartphone maka brand tidak terlihat. Brand akan muncul hanya jika di klik hamburgernya, ini biasanya digunakan apabila logo+teksnya sangat panjang dan menjadikan brand dan hamburger tidak sejajar. Penggunaannya adalah sebagai berikut

Hasilnya pada tampilan laptop

Hasilnya jika dibuka menggunakan smartphone seperti hp/tab

 

9. Menu collapse

Selain contoh-contoh diatas, kita juga bisa menambahkan menu collapse sehingga saat pada tampilan responsive design akan muncul diatas icon hamburger.

Hasilnya

 

Bagaimana mudah bukan jika menggunakan bootstrap? Jika kita membuatnya sendiri pasti akan lebih panjang prosesnya karena kita harus membuat cssnya terlebih dahulu. Sobat bisa kreasikan navbar ini sesuai keinginan dan kebutuhan dan juga bisa gabungkan dengan elemen bootstrap lainnya untuk menjadikan navbar semakin menarik. Untuk warnanya pada contoh diatas saya gunakan acak namun sebenarnya sobat bisa menggantinya dengan warna bawaan bootstrap yang sudah saya bahas pada tutorial-tutorial bootstrap lainnya jadi intinya sama seperti pewarnaan button, teks,dll. Kita hanya perlu mengganti class .bg-success, .bg-danger, .bg-primary, dan masih banyak lagi.

Sekian postingan saya tentang Membuat Navbar dengan Bootstrap 4 dengan Mudah. Apabila ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan komentar pada kolom yang sudah disediakan. Kunjungi juga postingan saya yang lain untuk menambah ilmu sobat.

 

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

Membuat Nested Media Object pada Bootstrap 4

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

 

 

2 thoughts on “Membuat Navbar dengan Bootstrap 4 dengan Mudah

Leave a Reply

Your email address will not be published. Required fields are marked *

3 + six =