Hai teman-teman, setelah sebelumnya kita pernah membahas tentang cara membuat tab menu dengan bootstrap, sekarang kita akan membuat menu dengan menggunakan class nav-pills yang diberikan bootstrap. Menu ini akan kita kostumisasi juga dengan menggunakan glyphicon.

Tutorial Menu Nav-Pills dengan Bootstrap

Untuk membuat menu seperti di atas ketikkan mark up HTML di bawah ini. Tentu saja kamu telah memanggil bootstrap.css nya.

Penjelasan:

  • Sederhana, kamu hanya perlu memanggil class =”nav nav-pills” di dalam tag <ul>
  • Untuk membuatnya lebih baik, kamu dapat menambahkan icon pada menu dengan menambahkan class glyphicon dalam tag <span> di antara tag <a></a>. Misalnya:

Maka kita akan menampilkan icon pesan pada menu “pesan”.

Bagaimana? Sangat mudah kan teman-teman? Semoga bermanfaat. Terima kasih.