Membuat Navigation Menggunakan Bootstrap

Hallo teman-teman, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat navigation menggunakan Bootstrap. Navigation didalam Bootstrap adalah sesuatu yang sangat menonjol atau menarik didalam Bootstrap. Navigation merupakan komponen meta responsive yang berfungsi sebagai header navigasi untuk situs atau website kalian. Nah dibawah ini adalah beberapa Navigation yang terdapat didalam Bootsrap 3.

Nav Tabs

Untuk membuat nav tabs kalian bisa membuat :

Tag <ul>, kemudian didalam tag <ul> kalian bisa menambahkan class nav dan nav-tabs.

 Berikut adalah contoh penggunaannya :

Navigation Pills

Untuk membuat navigation Pills kalian bisa menambahkan class nav dan nav-pills didaln tag <ul>. Berikut adalah contoh penggunaannya :

Verticale Pills

Untuk membuat tampilan navigation pills secara vertical, kalian bisa menambahkan lagi class nav-stacked. Berikut adalah contoh penggunaannya :

Justified Nav

Justified Nav berfungsi untuk membuat nav tabs atau nav pills memiliki lebar yang sama dari induk mereka dilayar yang lebarnya lebih dari 768px. Kalian bisa menambahkan class nav-justified didalam class nav-tabs ataupun nav-pills. Berikut adalah contohnya :

Dropdown Nav

Untuk menambahkan Dropdown ke nav-pills kalian bisa menambahkan class dropdown pada tag <li> yang akan terdapat submenunya. Berikut adalah contoh penggunaannya :

Download Source