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.

    
    
    
    
    



    
        

            

                Link 1
            
            

                Link 2
            
            

                Link 3
            
        
    

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

...

• Dropdown link
  Link 1 Link 2 Link 3

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

• Link
• Link
• Link

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.