Home » Bootstrap » Navs Bootstrap: Bootstrap Tutorial #25

Navs Bootstrap: Bootstrap Tutorial #25

by YogaBayu
by YogaBayu

Kembali lagi pada tutorial ke 25 mengani Bootstrap, pada pembahasan kali ini kita akan membahas mengenai komponen pada bootstrap lagi yaitu Navs.

Navs adalah singkatan dari Navigasi, yang berarti sekumpulan komponen yang mengandung link dan telah disediakan oleh bootstrap untuk membuat suatu menu navigasi pada website. Kegunaan Navs atau navigasi sendiri adalah untuk mempermudah pembaca website dalam mengunjungi (melihat) bagian halaman website yang lain.

Ada satu komponen lagi dalam bootstrap yang memiliki fungsi atau maksud yang sama dengan navs yaitu Navbar yang akan kita bahas pada pembahasan selanjutnya.

Basic Navs

Dalam bootstrap 4 untuk membuat komponen Navs ini kita perlu menggunakan class .navs pada komponen induk seperti <ul>. Didalam class .navs tentunya terdapat item – item link yang mengarah pada halaman website yang lain, nah item didalam class navs ini diberi class .nav-item.

Kita juga dapat membuat item – item ini aktif atau nonaktif sesuai keinginan kita yaitu dengan menambahkan class .disabled untuk item yang tidak ingin dapat di klik oleh pengguna atau item nonaktif. Pada dasarnya setiap item pada navs yang tidak diberi class tambahan .disabled berari item tersebut aktif dan dapat di klik pengguna. Tetapi jika kita menggunakan class .active pada item navs maka item tersebut akan terlihat biasa tanpa adanya style yang special.

contohnya:

HTML

Perataan Komponen Navs

Kita juga dapat mengatur perataan pada Navs dengan menggunakan utilitas dari bootstrap yaitu Flex. Secara default Navs pada bootstrap 4 akan muncul dengan rata kiri. Untuk Rata tengah kita tambahkan class .nav justify-content-center, untuk Navs rata kanan kita tambahkan class .nav justify-content-end. Contoh penggunaannya :

HTML

Vertikal Navs

Selain diarahkan secara horizontal navs juga dapat dibuat secara vertikal, yaitu dengan memanfaatkan utilitas bootstrap yaitu Flex. Tambahkan class .flex-column. Kita juga dapat menambahkan versi responsif dari Flex yaitu dengan class .flex-sm-column. Kita juga dapat membuat vertikal navs tanpa tag <ul> yaitu langsung menempatkan class .navs pada tag navs.

contoh penerpannya:

HTML

Tabs

Tabs merupakan variasi dari navigasi navs, untuk membuat nya kita menambahkan class .nav-tabs setelah class .nav. Kalau pada dasarnya navs ketika itemnya diberi class .active maka tidak akan berefek apapun, tetapi ketika menggunakan nav-tabs maka ketika itemnya diberi class .active maka akan berefek menghasikan antarmuka tab.

Nah, variasi Tabs juga dapat dibuat memenuhi layar dan masing- masing item memiliki lebar yang sama, untuk melakukan hal ini kita akan menambahkan class .nav-justified atau .nav-fill.

Variasi navigasi ini juga dapat dipadukan dengan dropdown. Untuk melakukan hal ini kita hanya perlu menambahkan class .dropdown pada item navs yang ingin digunakan sebagai triger dan .dropdown-item serta class .dropdown-menu untuk item dropdownnya.

Terdapat satu variasi lagi yang biasa digunakan yaitu toggleable tabs atau navigasu tabs dengan pemuatan konten otomatis, tambahkan atribut data-toggle = "tab" ke setiap tautan. Kemudian tambahkan class .tab-pane dengan ID unik untuk setiap tabs konten dan gabungkan di dalam elemen dengan kelas .tab-content.

Jika Anda ingin tab memudar masuk dan keluar saat mengkliknya, tambahkan kelas .fade ke .tab-pane:

lebih jelasnya silahkan lihat pada contoh dibawah:

HTML

Pills

Pills merupakan variasi dari navigasi navs, untuk membuat nya kita menambahkan class .nav-pills setelah class .nav. Kalau pada dasarnya navs ketika itemnya diberi class .active maka tidak akan berefek apapun, tetapi ketika menggunakan nav-pills maka ketika itemnya diberi class. active maka akan berefek menghasikan background yang berwarna dan memiliki border.

Nah, variasi Pills juga dapat dibuat memenuhi layar (dengan width yang seimbang) dan masing- masing item memiliki lebar yang sama, untuk melakukan hal ini kita akan menambahkan class .nav-justified atau .nav-fill.

Sama seperti Tabs Variasi navigasi ini juga dapat dipadukan dengan dropdown. Untuk melakukan hal ini kita hanya perlu menambahkan class .dropdown pada item navs yang ingin digunakan sebagai triger dan .dropdown-item serta class .dropdown-menu untuk item dropdownnya.

Untuk melakukan toggleable pills cara nya sama dengan toggleable tabs sebelumnya ya

Berikut variasi navigasi navs pills:

HTML

Sekian penjelasan mengenai menu navigasi .nav semoga bermanfaat . terima kasih

You may also like