Tutorial Bootstrap 4 #26 : Navs Bootstrap 4


Navs Bootstrap 4 – Pada tutorial bootstrap 4 bagian ke 26 ini kita akan belajar tentang salah satu komponen dari bootstrap lagi, Yaitu nav.

Mari simak penjelasan tentang komponen navs pada bootstrap 4 berikut.

Navs Bootstrap 4

Nav atau navs adalah singkatan dari navigation. nav merupakan komponen yang disediakan oleh bootstrap untuk membuat navigasi pada website.

Navigasi yang dimaksud adalah sebuah komponen yang biasanya terdiri dari beberapa link atau hyperlink yang berbentuk seperti menu.

Biasanya navs atau navigasi berguna sebagai menu yang mengarahkan pengunjung ke halaman-halaman website sesuai keinginan.

Membuat Navigasi Dengan Bootstrap 4

Untuk membuat navigasi atau navigation kita bisa menggunakan class .nav yang sudah disediakan oleh bootstrap. selanjutnya di dalam elemen .nav buat item-item elemen .nav dengan menggunakan class .nav-item.

Pada contoh ini kita menggunakan elemen list HTML untuk membuat komponen navs bootstrap. perhatikan contoh menu navigasi sederhana berikut.

Atau jika teman-teman tidak ingin menggunakan elemen list HTML seperti pada contoh di atas, teman-teman bisa juga menggunakan elemen <nav> dan langsung mengisi link (<a> .. </a>) di dalamnya, seperti contoh berikut. hasilnya akan sama saja.

Perhatikan contoh di atas.

Untuk membuat menu navigasi atau navigation (Navs), gunakan class .nav, kemudian item-item dari navigasi ini kita buat dengan hyperlink yang kita beri class .nav-item. selanjutnya kemana link tersebut akan diarahkan ketika diklik bisa teman-teman isi sesuai keinginan.

Kita lihat hasilnya.

membuat menu navigasi bootstrap 4

membuat menu navigasi bootstrap 4

Seperti yang terlihat pada gambar di atas, menu navigasi telah tampil dengan sempurna, sedikit info tambahan dari contoh di atas.

Gunakan class .disabled pada link yang ingin dinonaktifkan, sehingga warna link nya akan berubah menjadi warna abu-abu. dan gunakan class .active untuk menandai link yang ingin diberi efek seolah-olah sedang aktif.

Mengubah Posisi Navigasi

Untuk mengubah posisi dari menu navigasi, kita bisa gunakan class .justify-content-center untuk meletakkan menu navigasi ke tengah.

Gunakan class .justify-content-end untuk mengubah posisi navigasi ke sebelah kanan.

Kedua class tersebut bisa digunakan salah satunya untuk diletakkan beriringan dengan class .nav.

Perhatikan contoh berikut.

dan hasilnya seperti berikut.

mengubah posisi menu navigasi

mengubah posisi menu navigasi

Menu Navigasi Vertikal

Jika contoh-contoh menu navigasi yang kita buat sebelumnya berbentuk horizontal atau berurutan ke samping, kita juga bisa membuat menu navigasi yang berbentuk vertikal atau berurutan ke bawah.

Untuk membuat menu navigasi vertikal, gunakan class .flex-column.

Perhatikan contoh berikut.

dan hasilnya akan seperti berikut.

menu navigasi vertikal

menu navigasi vertikal

Menu Navigasi Tab

Pada sub judul ini kita juga akan belajar membuat menu navigasi yang berbentuk tab.

Untuk membuat tab dengan bootstrap, kita juga masih bisa menggunakan komponen navs ini, kita hanya tinggal menambahkan class .nav-tabs saja beriringan dengan class .nav.

Perhatikan contoh cara membuat tab dengan bootstrap berikut.

menu navigasi tab bootstrap

menu navigasi tab bootstrap

Menu Navigasi Pills

Sama seperti menu navigasi tabs, hanya saja bedanya ada pada bentuk menu navigasi. jika menu navigasi tab berbentuk seperti tab, maka menu navigasi pills lebih berbentuk pil atau kapsul.

Untuk membuat navigasi pills, kita bisa menggunakan class .nav-pills.

perhatikan contoh berikut.

Dan hasilnya seperti berikut.

menu navigasi pills

menu navigasi pills

Untuk fungsi masih sama saja dengan navigasi tabs. perbedaan antara navigasi tab dengan navigasi pills hanya terletak pada bentuk nya saja.

Menu Navigasi Yang Menggunakan Dropdown

Bootstrap juga membuat komponen nav bisa memiliki komponen dropdown.

Silahkan baca juga tutorial bootstrap 4 yang sudah kita bahas sebelumnya tentang dropdown.

Baca : Tutorial Bootstrap 4 #19 : Dropdown Bootstrap 4

Perhatikan contoh membuat nav yang menggunakan dropdown seperti berikut.

Contoh di atas kita menggunakan nav tab (.nav-tabs), Atau jika teman-teman ingin nav dropdown nya sibuat dengan nav pills, bisa terapkan class .nav-pills seperti cara sebelumnya.

dan hasilnya seperti berikut.

Navs Bootstrap 4

Navs Bootstrap 4

Jika teman-teman memperhatikan syntax di atas, untuk cara membuat dropdown pada navigasi seperti di atas caranya masih sama seperti cara membuat dropdown pada tombol. seperti yang sudah kita pelajari pada tutorial dropdown bootstrap 4 sebelumnya.

Jika teman-teman ingin membaca dokumentasi tentang komponen navs pada situs resmi bootstrap sendiri, teman-teman bisa membacanya di link berikut.

https://getbootstrap.com/docs/4.3/components/navs/

Membuat Tab Dengan Navs

Dengan komponen navs, kita juga bisa membuat semacam komponen tab pada website. kegunaan nya sendiri ada banyak.

Salah satunya saja kita ambil contoh misalnya teman-teman ingin membuat ulasan, review dan lain-lain pada tampilan toko online.

Kita bisa membuat fitur tersebut dengan bentuk tab. jadi user bisa tinggal melakukan klik pada judul-judul tab tergantung ingin menampilkan data ulasan, review atau lain-lain.

Supaya tidak bingung saya buatkan contohnya langsung. untuk contoh sederhana tab bootstrap silahkan teman-teman perhatikan penjelasan berikut.

 

 

 

 

 

 

 

Incoming search terms:

  • bootstrap 4 malasngoding



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

modal bootstrap 4
media object bootstrap 4
list group bootstrap 4
jumbotron bootstrap
Diskusi
Tidak Ada Komentar