Bootstrap - Breadcrumb: Panduan Pemula

Hai sana, para pengembang web yang sedang belajar! Hari ini, kita akan mendalaminya tentang dunia breadcrumb Bootstrap. Jangan khawatir jika Anda belum pernah mendengar tentang breadcrumb sebelumnya - pada akhir tutorial ini, Anda akan dapat membuatnya seperti seorang ahli! Mari kita mulai perjalanan yang menarik ini bersama-sama.

Bootstrap - Breadcrumb

Apa Itu Breadcrumb?

Sebelum kita masuk ke kode, mari kita pahami apa itu breadcrumb. Bayangkan Anda sedang menjelajahi hutan luas (yang kadang-kadang internet terasa seperti itu). Apakah Anda merasa senang jika Anda memiliki jejak breadcrumb untuk membantu Anda menemukan jalan kembali? Itu tepat apa yang dilakukan breadcrumb dalam desain web!

Breadcrumb adalah alat navigasi yang menunjukkan lokasi pengguna saat ini dalam hierarki situs web. Biasanya, mereka ditampilkan sebagai baris tautan di bagian atas halaman, memungkinkan pengguna untuk mudah menavigasi kembali ke halaman level tinggi.

Mengapa Menggunakan Breadcrumb Bootstrap?

Bootstrap, kerangka kerja CSS teman sekeliling kita, membuat membuat breadcrumb menjadi mudah. Itu menyediakan komponen yang sudah diatur gayanya yang kita dapat implementasikan dengan mudah di halaman web kita. Jadi, instead of reinventing the wheel, kita dapat menggunakan breadcrumb siap pakai Bootstrap dan menyesuaikan mereka sesuai kehendak kita!

Sekarang, mari kita roll up our sleeves dan mulai mengoding!

Breadcrumb Dasar

Langkah 1: Menyiapkan Bootstrap

Pertama-tama, kita perlu menyertakan Bootstrap dalam file HTML kita. Tambahkan baris berikut di dalam section <head> HTML Anda:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Ini menghubungkan file CSS dan JavaScript Bootstrap ke dokumen kita.

Langkah 2: Membuat Breadcrumb Dasar

Sekarang, mari kita buat breadcrumb pertama kita! Berikut adalah struktur dasar:

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

mari kitauraikan ini:

Kita wrap breadcrumb kita di dalam elemen <nav> dengan aria-label="breadcrumb". Ini meningkatkan aksesibilitas bagi pembaca layar.
Elemen <ol> dengan kelas breadcrumb membuat wadah breadcrumb.
Setiap elemen <li> mewakili tingkat dalam hierarki breadcrumb.
Kelas breadcrumb-item gayakan setiap item.
Item terakhir memiliki kelas active dan aria-current="page" untuk menandai halaman saat ini.

Ketika Anda melihat ini di browser Anda, Anda akan melihat jejak breadcrumb yang rapi: Rumah > Perpustakaan > Data

Langkah 3: Menambahkan Tautan

Untuk membuat breadcrumb kita fungsional, kita perlu menambahkan tautan yang benar. Mari kita modifikasi kode kita:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Rumah</a></li>
<li class="breadcrumb-item"><a href="library.html">Perpustakaan</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>

Sekarang, mengklik "Rumah" akan membawa Anda ke index.html, dan "Perpustakaan" ke library.html. Halaman saat ini ("Data") tidak memiliki tautan karena itu tempat kita saat ini berada.

Pemisah

Secara default, Bootstrap menggunakan garis miring (/) sebagai pemisah antara item breadcrumb. Tetapi, apa kalau kita ingin kreatif dan menggunakan sesuatu lain? Mari kita jelajahi bagaimana untuk menyesuaikan pemisah kita!

Pemisah Khusus dengan CSS

Kita dapat mengubah pemisah menggunakan CSS. Berikut adalah cara:

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Rumah</a></li>
<li class="breadcrumb-item"><a href="#">Perpustakaan</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>

Dalam contoh ini, kita telah mengubah pemisah menjadi simbol ">" menggunakan variabel CSS --bs-breadcrumb-divider.

Menggunakan Ikon sebagai Pemisah

Ingin menjadi lebih mengerikan? Mari kita gunakan ikon sebagai pemisah! Kita akan menggunakan ikon Font Awesome untuk contoh ini:

<!-- Sertakan Font Awesome di kepala HTML Anda -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<!-- HTML breadcrumb Anda -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Rumah</a></li>
<li class="breadcrumb-item">
<i class="fas fa-chevron-right"></i>
<a href="#">Perpustakaan</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<i class="fas fa-chevron-right"></i>
Data
</li>
</ol>
</nav>

Di sini, kita telah menset --bs-breadcrumb-divider ke string kosong dan secara manual menambahkan ikon segitiga ke kanan item breadcrumb kita.

Praktik Terbaik Breadcrumb

Sekarang Anda tahu bagaimana membuat dan menyesuaikan breadcrumb, mari kita bicarakan tentang beberapa praktik terbaik:

Simpanlah itu sederhana: Jangan sertakan setiap halaman dalam jejak breadcrumb Anda. Tetapkan ke kategori utama saja.
Gunakan label yang jelas: Pastikan label breadcrumb Anda ringkas dan deskriptif.
Jangan gunakan breadcrumb di situs level tunggal: Mereka paling berguna untuk situs dengan hierarki yang jelas.
Tempatkan mereka di atas: Breadcrumb biasanya ditempatkan di bagian atas halaman, di bawah navigasi utama.

Kesimpulan

Selamat! Anda baru saja belajar bagaimana membuat dan menyesuaikan breadcrumb Bootstrap. Dari implementasi dasar hingga pemisah yang mengerikan, Anda sekarang dilengkapi untuk mengarahkan pengguna Anda melalui situs Anda dengan gaya.

Ingat, breadcrumb adalah seperti papan tanda dalam hutan digital Anda. Mereka membantu pengguna mengetahui di mana mereka berada dan bagaimana untuk kembali ke tempat sebelumnya. Gunakan mereka bijak, dan pengguna Anda akan berterima kasih kepada Anda karena membuat perjalanan mereka melalui situs Anda menjadi mudah!

Terus latihan, terus jelajahi, dan terutama, terus bersenang-senang dengan pengembangan web. Sampai jumpa lagi, coding yang menyenangkan!

Credits: Image by storyset