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

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

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 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 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

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

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 kita ambil contoh misalnya teman-teman ingin membuat tampilan ulasan, review dan lain-lain pada tampilan toko online.

Nah, Kita bisa membuat fitur tersebut dalam 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.

Perhatikan pada contoh di atas. pada contoh di atas kita membuat 3 buah tab. yaitu ada tab home, profil, kontak.

Judul tab kita buat dalam element <nav> .. </nav>. kemudian di dalam element nav kita buat class .nav dan di dalamnya lagi kita buat class .nav-item sebagai item-item dari judul atau nama tab yang ingin kita buat.

Kemudian dibagian class .tab-content kita membuat isi dari masing-masing tab, seperti misalnya isi dari tab home, tab profil dan tab kontak.

Nah, cara kerjanya masing-masing tab ditampilkan berdasarkan judul tab yang diklik. jika teman-teman perhatikan pada judul-judul tab yang sudah kita buat, atribut href=”” dari masing-masing judul tab tersebut kita isi dengan nama masing-masing isi tab yang akan ditampilkan jika judul tab tersebut diklik.

Contoh misalnya tab profil diklik, maka konten yang ditampilkan adalah kontan yang memiliki id “nav-profil“.

Kita lihat hasilnya.

membuat tab dengan bootstrap 4

Membuat Tab Dengan Navs Pills

Bootstrap juga menyediakan class untuk membuat komponen tab yang berbentuk pills seperti contoh yang sudah pernah dibahas sebelumnya.

membuat tab dengan navs pills bootstrap

Oke selesai.

Membuat Tab Vertikal

Jika contoh sebelumnya membahas cara membuat navigasi tab yang berbentuk horizontal atau ke samping, pada sub judul ini kita akan membahas cara membuat tab yang berbentuk vertikal atau kebawah.

Ya, bootstrap juga sudah menyediakan cara ini. mari simak contoh berikut.

Perhatikan contoh di atas, cara pembuatan tab nya masih sama seperti pada cara sebelumnya, bedanya di sini kita mengubah bentuk judul tab nya, sekalian membagi halaman menjadi 2 bagian, menggunakan class grid system. bagian judul tab nya kita beri class col-3. karena kita tidak ingin ukurannya terlalu lebar. sedangkan bagian konten nya kita beri class .col-9 untuk mengisi ukuran selebihnya dari 12 grid sistem bootstrap.

Baca juga : Tutorial Bootstrap 4 #4 : Grid System Bootstrap 4

Hasilnya

membuat tab vertikal ke bawah bootstrap 4

Selesai.

Terima kasih sudah mengikuti  Tutorial Bootstrap 4 #26 : Navs Bootstrap 4. sampai jumpa pada tutorial bootstrap 4 selanjutnya di www.malasngoding.com.

Jika teman-teman ingin membaca panduan navigasi dari situs bootstrap nya langsung, teman-teman bisa membaca nya di https://getbootstrap.com/docs/4.3/components/navs/

Semua contoh dan source code di materi ini bisa didapatkan pada link berikut.

DEMO

DOWNLOAD SOURCE CODE