Pernahkah Anda mengunjungi sebuah situs web besar seperti e-commerce atau portal berita dan merasa tahu persis sedang berada di halaman mana? Kemungkinan besar situs tersebut menggunakan navigasi breadcrumb. Artikel ini akan memandu Anda cara membuat breadcrumb yang bersih, responsif, dan fungsional menggunakan Bootstrap 5.

Apa Itu Breadcrumb?

Breadcrumb (jejak remah roti) adalah komponen navigasi sekunder yang menunjukkan posisi pengguna dalam hierarki sebuah situs web. Nama ini terinspirasi dari dongeng Hansel dan Gretel yang meninggalkan jejak remah roti agar bisa kembali pulang. Dalam konteks web, ini membantu pengguna memahami alur halaman yang telah mereka lewati dan dengan mudah kembali ke halaman sebelumnya.

Manfaat utama menggunakan breadcrumb adalah:

• Meningkatkan Pengalaman Pengguna (UX): Memberikan konteks lokasi yang jelas kepada pengguna.
• Mengurangi Jumlah Klik: Pengguna dapat dengan mudah melompat ke halaman level atas tanpa harus menekan tombol “kembali” berkali-kali.
• Struktur yang Jelas: Menampilkan hierarki konten situs secara visual.

Struktur Dasar Breadcrumb di Bootstrap

Membuat breadcrumb di Bootstrap sangatlah mudah. Anda hanya memerlukan sebuah elemen <nav> dengan daftar berurutan (<ol>) yang berisi item-itemnya.

Berikut adalah kelas-kelas utamanya:

• .breadcrumb: Diterapkan pada elemen pembungkus <ol> untuk mengaktifkan styling breadcrumb.
• .breadcrumb-item: Diterapkan pada setiap elemen <li> di dalam daftar.
• .active: Kelas ini ditambahkan pada .breadcrumb-item terakhir untuk menandakan halaman yang sedang aktif. Item ini biasanya tidak memiliki tautan.

Contoh Kode Dasar:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Perpustakaan</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Penjelasan:

• Elemen <nav> dengan aria-label="breadcrumb" memberikan konteks bagi teknologi pembaca layar (screen reader) bahwa ini adalah navigasi breadcrumb.
• Dua item pertama adalah tautan (<a>) yang bisa diklik untuk kembali ke halaman Home atau Perpustakaan.
• Item terakhir (“Data”) memiliki kelas .active dan atribut aria-current="page". Ini membuatnya secara visual berbeda (biasanya berwarna lebih pudar) dan memberitahu pembaca layar bahwa ini adalah halaman saat ini. 🍞

Kustomisasi Breadcrumb

Bootstrap 5 memberikan kemudahan untuk mengubah tampilan breadcrumb, terutama pemisahnya.

Mengubah Karakter Pemisah (Divider)

Secara default, Bootstrap menggunakan karakter garis miring (/) sebagai pemisah. Anda bisa mengubahnya dengan sangat mudah melalui CSS custom property bernama --bs-breadcrumb-divider.

Misalnya, untuk mengubah pemisah menjadi >:

<style>
  .breadcrumb {
    --bs-breadcrumb-divider: '>';
  }
</style>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Produk</li>
  </ol>
</nav>

Anda bahkan bisa menggunakan SVG sebagai pemisah jika menginginkan ikon kustom.

Menghilangkan Pemisah

Jika Anda tidak ingin ada pemisah sama sekali, cukup atur nilainya menjadi none:

.breadcrumb {
  --bs-breadcrumb-divider: ' '; /* Atau 'none' */
}

Menambahkan Ikon pada Breadcrumb

Untuk membuat navigasi lebih intuitif, Anda dapat menambahkan ikon, misalnya ikon rumah untuk tautan “Home”. Anda bisa menggunakan pustaka ikon seperti Bootstrap Icons atau Font Awesome.

Contoh dengan Bootstrap Icons:

Pastikan Anda sudah menyertakan file CSS Bootstrap Icons di proyek Anda.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">
        <i class="bi bi-house-door-fill"></i> Home
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Kategori</a></li>
    <li class="breadcrumb-item active" aria-current="page">Elektronik</li>
  </ol>
</nav>

Dalam contoh di atas, tag <i> dengan kelas bi bi-house-door-fill akan menampilkan ikon rumah di sebelah kiri teks “Home”.

Kesimpulan

Membuat navigasi breadcrumb dengan Bootstrap adalah cara yang cepat dan efektif untuk meningkatkan struktur navigasi dan pengalaman pengguna di situs web Anda. Dengan beberapa kelas sederhana seperti .breadcrumb dan .breadcrumb-item, Anda sudah bisa membuat komponen yang fungsional. Fleksibilitas kustomisasi melalui CSS custom properties juga memungkinkan Anda untuk menyesuaikan tampilannya agar sesuai dengan desain situs Anda. Selamat mencoba! ✨