Selamat datang di seri tutorial Bootstrap ke-11! Setelah mempelajari berbagai komponen Bootstrap, kali ini kita akan membahas cara membuat navigasi yang interaktif menggunakan Tabs (tab) dan Pills (pil). Komponen ini sangat berguna untuk mengorganisir konten dalam satu halaman agar terlihat lebih rapi dan hemat ruang, misalnya untuk memisahkan deskripsi produk, spesifikasi, dan ulasan.

Navigasi Tabs dan Pills memungkinkan pengguna untuk beralih di antara beberapa panel konten yang berbeda tanpa perlu memuat ulang halaman. Mari kita pelajari cara membuatnya.

Apa itu Navigasi Tabs dan Pills?

Secara fungsional, Tabs dan Pills memiliki tujuan yang sama: mengelompokkan konten dan memungkinkan pengguna untuk berpindah antar-kelompok konten tersebut. Perbedaan utama keduanya hanya terletak pada tampilan visualnya.

• Tabs: Tampilannya menyerupai tab folder fisik, di mana tab yang aktif akan terlihat menyatu dengan panel kontennya.
• Pills: Tampilannya lebih mirip tombol atau “pil” yang diberi latar belakang untuk menandai item yang aktif.

Keduanya dibangun di atas komponen dasar nav dari Bootstrap.

Membuat Navigasi Tabs

Untuk membuat navigasi Tabs, kita membutuhkan dua bagian utama: navigasi itu sendiri dan konten yang akan ditampilkan.

1. Struktur HTML untuk Navigasi

Pertama, kita buat daftar link navigasi menggunakan <ul> dengan kelas .nav dan .nav-tabs. Setiap item <li> diberi kelas .nav-item dan tautannya <a> diberi kelas .nav-link.

• .nav .nav-tabs: Menerapkan gaya visual untuk Tabs.
• .nav-item: Menandai setiap item dalam navigasi.
• .nav-link: Memberi gaya pada tautan.
• .active: Kelas ini wajib ditambahkan pada salah satu .nav-link untuk menandai tab yang aktif saat halaman pertama kali dimuat.
• data-bs-toggle="tab": Atribut ini penting untuk mengaktifkan fungsionalitas JavaScript dari Bootstrap.
• href atau data-bs-target: Atribut ini menunjuk ke ID dari panel konten yang sesuai.

Contoh Kode Navigasi Tabs:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Beranda</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profil</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Kontak</a>
  </li>
</ul>

2. Struktur HTML untuk Konten

Selanjutnya, kita buat wadah untuk semua panel konten dengan <div> yang memiliki kelas .tab-content. Setiap panel konten adalah <div> terpisah dengan kelas .tab-pane.

• .tab-content: Wadah utama untuk semua panel.
• .tab-pane: Menandai sebuah panel konten.
• .active dan .show: Kelas ini wajib ditambahkan pada salah satu .tab-pane yang sesuai dengan tab aktif agar kontennya terlihat saat halaman dimuat.
• id: ID ini harus cocok dengan nilai href atau data-bs-target dari navigasi di atas.

Contoh Kode Konten Tabs:

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p class="mt-3">Ini adalah konten untuk tab <strong>Beranda</strong>. Selamat datang di halaman utama!</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p class="mt-3">Ini adalah konten untuk tab <strong>Profil</strong>. Di sini Anda bisa melihat informasi profil pengguna.</p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <p class="mt-3">Ini adalah konten untuk tab <strong>Kontak</strong>. Hubungi kami melalui formulir di halaman ini.</p>
  </div>
</div>

Kelas .fade menambahkan efek transisi fade yang halus saat berpindah antar-tab.

Membuat Navigasi Pills

Membuat Pills sangat mirip dengan Tabs. Satu-satunya perbedaan adalah Anda mengganti kelas .nav-tabs menjadi .nav-pills. Semua struktur lainnya, termasuk atribut data-bs-toggle dan kelas .tab-content, tetap sama.

Contoh Kode Navigasi Pills:

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Beranda</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profil</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Kontak</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <p>Ini adalah konten untuk pil <strong>Beranda</strong>.</p>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <p>Ini adalah konten untuk pil <strong>Profil</strong>.</p>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <p>Ini adalah konten untuk pil <strong>Kontak</strong>.</p>
  </div>
</div>

Catatan: Pada contoh di atas, kita menggunakan elemen <button> sebagai ganti <a>. Keduanya bisa digunakan, tetapi jika navigasi tidak mengarah ke URL lain, penggunaan <button> lebih disarankan dari sisi aksesibilitas.

Fitur Tambahan

1. Justified dan Fill

Anda bisa membuat navigasi Tabs atau Pills memenuhi lebar wadahnya dengan menambahkan kelas:

• .nav-fill: Setiap item .nav-item akan memiliki lebar yang sama.
• .nav-justified: Mirip dengan .nav-fill, tetapi lebar setiap item akan dipaksa sama persis.

Contoh Penggunaan:

<ul class="nav nav-pills nav-fill">
  ...
</ul>

<ul class="nav nav-tabs nav-justified">
  ...
</ul>

2. Menambahkan Dropdown

Anda juga bisa menyisipkan menu dropdown di dalam navigasi Tabs atau Pills. Caranya adalah dengan menambahkan item <li> dengan kelas .dropdown dan menyusun struktur dropdown Bootstrap di dalamnya.

Contoh Kode Dropdown pada Pills:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Aktif</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Aksi</a></li>
      <li><a class="dropdown-item" href="#">Aksi Lain</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Link Terpisah</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

Kesimpulan

Navigasi Tabs dan Pills adalah komponen yang kuat dan mudah diimplementasikan untuk meningkatkan pengalaman pengguna di situs Anda. Dengan mengelompokkan konten secara logis, Anda dapat menyajikan informasi yang padat dengan cara yang bersih dan terorganisir. Kunci utamanya adalah memastikan hubungan antara link navigasi (menggunakan href atau data-bs-target) dan panel konten (menggunakan id) sudah benar.