Bootstrap - Navs and Tabs

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 mirip dengan 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 genggam lengan dan mulai mengoding!

Navigasi dasar

mari 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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>

Kode ini menciptakan daftar horisontal dari tautan navigasi. Kelas active menandai halaman saat ini, sedangkan kelas disabled mengabu-abukan tautan yang saat ini tidak dapat diklik.

gaya yang tersedia

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

Nav tabs

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
</ul>

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

Nav pills

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
</ul>

Gaya pills memberikan penampilan yang lebih seperti tombol ke tautan navigasi Anda.

Ratakan horizontal

Anda dapat mudah mengubah rataan 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 menengahkan item nav, sedangkan justify-content-end meratakan item ke kanan.

Menggunakan utilitas fleks

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

<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>

Ini menciptakan menu navigasi vertikal menggunakan kelas flex-column.

Mengenai 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="#">Active</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="#">Active</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="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</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="#">Separated link</a></li>
</ul>
</li>
<!-- Item nav lainnya -->
</ul>

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

Tabs dengan dropdown

Anda juga dapat menambahkan dropdown di nav gaya tab:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>

Pills dengan dropdown

Prinsip yang sama berlaku untuk nav gaya pill:

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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">Home</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">Profile</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 Home di sini...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Konten Profile 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 mengontrol 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">Home</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 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 beralih 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 meng eksperimenkan komponen ini dalam proyek Anda sendiri. Selamat coding!

Credits: Image by storyset