Cara menggunakan bootstrap dropdown navbar

Kelasprogrammer.com – Navbar adalah sebuah navigasi pada website yang biasanya terletak di atas halaman. Navbar memiliki fungsi untuk memberi petunjuk pengguna lewat informasi menu/kategori yang diberikan, Sehingga user bisa dengan mudah berpindah halaman berdasarkan link yang diberikan melalui navigasi bar tersebut. Kali ini saya akan share dan membahas secara lengkap cara membuat navbar dengan bootstrap.

Pada umumnya navbar mempunyai desain secara horizontal, namun dalam pengembangannya sekarang ada juga navbar secara vertikal. Hal ini ada kaitannya dengan perkembangan teknologi yang dulunya akses internet dilakukan lewat komputer PC/laptop kini sudah banyak yang menggunakan smartphone. Sehingga diperlukan navigasi bar yang responsive terhadap semua jenis perangkat yang mengaksesnya. Dengan framework CSS Bootstrap kita dapat membuat keduanya, baik horizontal maupun vertikal.

Didalam Bootstrap untuk menggunakan standar navigasi bar kita gunakan class .navbar, lalu bisa kita ikutkan dengan fitur responsive collaps dengan beberapa ukuran standar yang diberikan seperti extra large, large, medium atau small.

Untuk Membuat link didalam navbar tersebut maka kita akan gunakan tag

sedikit meriview tag
meruakan tag untuk membuat list (daftar) dengan jenis tidak terurut (unordered list).

Baca pada : List di html

Daftar Isi

Konfigurasi Bootstrap

Sebelum kita membuat navbar dengan bootstrap, maka tentunya kita perlu konfigurasi css bootstrapnya terlebih dahulu ya, ada dua metode yang bisa kita gunakan yang pertama adalah metode dengan teknik CDN (Content Delivery Network) dengan teknik ini kita dapat langsung menggunakan bootstrap melalui koneksi jaringan internet tanpa perlu instalasi atau download ke lokal drive kita. Berikut ini adalah beberapa file yang dibutuhkan untuk membuat navbar. Diantaranya css bootstrap dengan versi 4.3.1, Jquery dengan versi 3.4.1 popper.js dan js dari bootstrap sendiri.

Jika kalian tidak ingin menggunakan metode CDN, maka kalian perlu mendownload file2 tersebut kedalam lokal driver kalian. Lalu kemudian di panggil dari dalam tag .

Rekomendasi : Cara menggunakan Bootstrap

Oke langsung saja buat sebuah file bisa dengan format html maupun php. Copy script dibawah ini, lalu coba jalankan di browser.

Dari Script program diatas akan menghasilkan navbar dengan tipe standar ya, seperti pada gambar berikut:

Dengan Bootstrap kita bisa membuat navbar dengan berbagai warna dan juga fitur tambahan, seperti menambahkan logo, menu dropdown dan collaps. Simak pembahasan dibawah ini:

Medifikasi Warna Navbar

Didalam bootstrap terdapat bermacam-macam warna yang bisa kita gunakan untuk navbar yang kita buat. Caranya juga sangat mudah kita cukup memanggil class bg-color pada element navbarnya.

1. bg-primary
2. bg-success
3. bg-info
4. bg-warning
5. bg-danger
6. bg-secondary
7. bg-light
8. bg-dark

Contoh kita akan membuat navbar dengan warna background orange, maka kita gunakan class bg-warning

Kalian bisa coba sendiri dengan warna yang lain berdasarkan class background yang saya sebutkan diatas.

Navbar dengan Logo Gambar

Selanjutnya dengan bootstrap kita juga dapat membuat navbar dengan style logo didalamnya. Fitur ini bisa kita pakai untuk memasang logo website kita. Caranya kita perlu menambah tag lalu di ikuti dengan atribut class=’navbar-brand’. Contohnya seperti pada sintak dibawah ini

Navbar dengan Menu DropDown

Selanjutnya kita juga bisa membuat menu dropdown di navbar. Yang perlu kita lakukan adalah memanggil class dropdown pada list item di navbar yang kita buat. Untuk lebih jelasnya perhatikan sintak dibawah ini:

Tahap pertama kita panggil dulu class nav-item dropdown nya kemudian dri item tersebut ketika di klik maka akan muncul list item dropdown-nya.

Navbar dengan Form dan Button

Selanjutny kita dapat membuat navbar yang didalamnya terdapat form input dan button. Saya sering lihat fitur ni sering digunakan oleh website yang biasanya menggunakan template dari bootstrap. Untuk membuatnya kita cukup menambahkan tag

didalam navbar yang kita buat. Yang perlu diperhatikan sebaiknya form menggunakan class form-inline sehingga komponen form akan sejajar dengan navbar-nya.

Artikel Lainnya : Cara membuat form di Bootstrap

Navbar dengan fitur Collaps

Terakhir, kita dapat menambahkan fitur Collaps untuk membuat efek responsive navbar. Jadi ketika navbar dibuka pada layar smartpohe dapat di buka dengan tombol collaps

Dapat kalian lihat lewat animasi diatas. Fitur collaps berjalan dengan baik pada ukuran layar yang kecil (smartphone).

Kesimpulan

Sekian dulu artikel saya mengenai cara membuat navbar dengan bootstrap. Semoga bermanfaat buat teman-teman semua yang sedang belajar framework CSS yang populer ini. Silahkan komen dibawah ini jika ada yang ingin ditanyakan, Terimakasih.