Sub navigasi tab pada Bootstrap

Pembahasan mengenai Bootstrap kali akan membahas mengenai sub navigasi tab pada Bootstrap. Pada saat merancang aplikasi ataupun membuat website company profile kita mungkin mempunyai menu utama dan juga sub menu. Kita telah membahas mengenai pembuatan menu utama menggunakan Bootstrap pada artikel sebelumnya. Pada artikel kali ini kita akan membuat sub menu atau sub navigasi.

Secara teknis kita akan mengembangkan source code kita dengan:

1. Awali dengan ul dengan class nav dan class nav-tabs
2. Masing-masing tab gunakan li dengan class nav-item
3. Pada link gunakan class nav-link
4. Untuk tab yang aktif, pada link tambahkan class active

Pada artikel kali ini kita akan membuat sub menu Web Design, Web Programming dan Mail Service yang merupakan bagian dari menu utama Service. Kita akan membuat sub menu ini dengan sub navigasi menggunakan tampilan tab.

1. Tab Web Design:
   Cuplikan source code pada sub navigasi  untuk tab  Design adalah seperti berikut ini:

    <ul class=”nav nav-tabs”>
   <li class=”nav-item”>
   <a class=”nav-link active” href=”design00.html”>Web Design</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link” href=”program00.html”>Web Programming</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link” href=”mail00.html”>Mail Service</a>
   </li>
   </ul>

   Hasil source code ini dapat dilihat di https://bs4.aris.proweb.asia/design00.html dengan tampilan seperti berikut ini:
   

   

2. Tab Web Programming:
   Cuplikan souce code pada tab Web Programming:

     <ul class=”nav nav-tabs”>
   <li class=”nav-item”>
   <a class=”nav-link” href=”design00.html”>Web Design</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link active” href=”program00.html”>Web Programming</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link” href=”mail00.html”>Mail Service</a>
   </li>
   </ul>

   Untuk demo dari tab Web Programming dapat dilihat di https://bs4.aris.proweb.asia/program00.html dengan tampilan seperti di bawah ini
   
   

3.  Tab Mail Service:
   Cuplikan source code untuk tab Mail Service ini adalah seperti berikut ini:

     <ul class=”nav nav-tabs”>
   <li class=”nav-item”>
   <a class=”nav-link” href=”design00.html”>Web Design</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link” href=”program00.html”>Web Programming</a>
   </li>
   <li class=”nav-item”>
   <a class=”nav-link active” href=”mail00.html”>Mail Service</a>
   </li>
   </ul>

   Untuk demo tampilan Mail Service ini dapat dilihat di https://bs4.aris.proweb.asia/program00.html dengan tampilan seperti berikut ini:
   

Informasi lebih lanjut silahkan mengunjungi https://getbootstrap.com/docs/4.3/components/navs/#tabs .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.