Bootstrap - Navs and Tabs (ID)

Pengenalan

Hai, para pengembang web yang bersemangat! Hari ini, kita akan mendalami salah satu komponen yang paling banyak digunakan dalam desain web: menu navigasi dan tab.Elemen ini seperti petunjuk jalan di website Anda, memandu pengguna ke berbagai bagian dan konten. Dengan komponen nav dan tab Bootstrap, kita dapat menciptakan sistem navigasi yang ramping dan responsif yang bekerja di semua perangkat. Jadi, mari kita roll up lengan dan mulai mengoding!

Navigasi dasar

Ayo mulai dari dasar. Bootstrap menyediakan cara sederhana untuk menciptakan menu navigasi menggunakan kelas .nav. Ini adalah contoh dasar:

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tentang</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Layanan</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontak</a>
</li>
</ul>

Kode ini menciptakan daftar horisontal dari tautan navigasi. Kelas active menyorot halaman saat ini, sedangkan kelas disabled memabarkan tautan yang saat ini tidak dapat diklik.

Style yang tersedia

Bootstrap menawarkan berbagai style untuk nav Anda. Mari kita lihat dua style yang populer:

Tab navigasi

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pesan</a>
</li>
</ul>

Ini menciptakan menu navigasi berbentuk tab, yang sempurna untuk mengatur konten ke dalam berbagai seksi.

Tab pil

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pesan</a>
</li>
</ul>

Style pil memberikan penampilan yang lebih mirip tombol bagi tautan navigasi Anda.

Penjajaran horizontal

Anda dapat mudah mengubah penjajaran item nav Anda. Ini adalah cara:

<ul class="nav justify-content-center">
<!-- Item nav di sini -->
</ul>

<ul class="nav justify-content-end">
<!-- Item nav di sini -->
</ul>

Kelas justify-content-center memusatkan item nav, sedangkan justify-content-end mengalign item ke kanan.

Menggunakan utilitas fleks

Utilitas fleks Bootstrap memberikan Anda kendali yang lebih banyak atas tata letak nav Anda:

<nav class="nav flex-column">
<a class="nav-link active" href="#">Aktif</a>
<a class="nav-link" href="#">Tautan</a>
<a class="nav-link" href="#">Tautan</a>
<a class="nav-link disabled" href="#">Nonaktif</a>
</nav>

Ini menciptakan menu navigasi vertikal menggunakan kelas flex-column.

Kesesuaian aksesibilitas

Saat membuat nav, sangat penting untuk mempertimbangkan aksesibilitas. Gunakan elemen <nav> di tempat yang sesuai, dan tambahkan aria-current="page" ke item aktif:

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Aktif</a>
<!-- Item nav lainnya -->
</nav>

Menggunakan dropdown

Nav dapat termasuk menu dropdown untuk struktur navigasi yang lebih kompleks:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" 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 lainnya</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Tautan terpisah</a></li>
</ul>
</li>
<!-- Item nav lainnya -->
</ul>

Kode ini menciptakan nav dengan menu dropdown. Atribut data-bs-toggle="dropdown" mengaktifkan fungsi dropdown.

Tab dengan dropdown

Anda juga dapat menambahkan dropdown di dalam nav berstyle tab:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" 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">
<!-- Item dropdown -->
</ul>
</li>
<!-- Item nav lainnya -->
</ul>

Tab pil dengan dropdown

Prinsip yang sama berlaku untuk nav berstyle pil:

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" 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">
<!-- Item dropdown -->
</ul>
</li>
<!-- Item nav lainnya -->
</ul>

Perilaku JavaScript

Plugin JavaScript Bootstrap dapat menambah perilaku dinamis ke nav Anda. Ini adalah cara untuk menciptakan set tab dengan panel konten:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Beranda</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profil</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Konten beranda di sini...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Konten profil di sini...</div>
</div>

Kode ini menciptakan set tab yang, saat diklik, menampilkan panel konten yang berbeda.

Aksesibilitas

Untuk membuat tab Anda aksesibel, gunakan atribut role, aria-controls, aria-selected, dan aria-labelledby seperti yang ditunjukkan dalam contoh sebelumnya.

Menggunakan atribut data

Atribut data memungkinkan Anda mengendalikan perilaku tab tanpa menulis JavaScript:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Beranda</button>
</li>
<!-- Tombol tab lainnya -->
</ul>

Atribut data-bs-toggle="tab" dan data-bs-target="#home" mengaktifkan fungsi tab tanpa JavaScript tambahan.

Melalui JavaScript

Anda juga dapat mengaktifkan tab melalui JavaScript:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

Kode ini menambahkan event listener klik ke setiap tombol tab, mengaktifkan tab yang sesuai saat diklik.

Efect fade

Untuk menambahkan efek fade ke tab Anda, gunakan kelas fade:

<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

Ini menciptakan efek transisi yang halus saat berpindah antar tab.

Dan itu saja! Anda telah belajar bagaimana menciptakan dan menyesuaikan menu navigasi dan tab menggunakan Bootstrap. Ingat, latihan membuat sempurna, jadi cobalah untuk mencoba komponen ini dalam proyek Anda sendiri. Selamat coding!

Metode	Deskripsi
Tab.getInstance(element)	Mendapatkan instance tab yang terkait dengan elemen DOM
Tab.getOrCreateInstance(element)	Mengembalikan instance tab yang terkait dengan elemen DOM atau menciptakan yang baru
show()	Memilih tab yang diberikan dan menampilkan panel yang terkait
dispose()	Menghancurkan tab elemen

Credits: Image by storyset