Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Bootstrap - Breadcrumb Demo

Hai teman-teman pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang menakjubkan dari breadcrumb Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jadi, ambillah secangkir kopi (atau minuman kesukaan Anda), dan mari kita mulai!

Bootstrap - Breadcrumbs Demo

Apa itu breadcrumb?

Sebelum kita masuk ke kode, mari kita pahami apa itu breadcrumb. Ingat cerita tentang Hansel dan Gretel? Mereka meninggalkan jejak roti untuk menemukan jalan pulang ke rumah. Well, pengembang web meminjam ide ini!

Dalam desain web, breadcrumb adalah alat navigasi yang menunjukkan lokasi pengguna saat ini dalam hierarki situs web. Itu seperti jejak digital yang membantu pengguna mengetahui di mana mereka berada dan bagaimana untuk kembali ke halaman sebelumnya. Sangat bagus, kan?

Mengapa menggunakan breadcrumb?

  1. Navigasi yang lebih baik
  2. Pengalaman pengguna yang bagus
  3. Mengurangi tingkat bounce
  4. Manfaat SEO

Sekarang kita tahu apa itu breadcrumb, mari kita lihat bagaimana Bootstrap membuat implementasinya mudah!

Breadcrumb Bootstrap: Dasar

Bootstrap, kerangka front-end yang dapat dipercaya, menyediakan cara sederhana untuk membuat breadcrumb. Mari kita mulai dengan contoh dasar:

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

Kode ini membuat breadcrumb sederhana dengan hanya satu item: "Home". Mari kitauraikan:

  1. Kita menggunakan elemen <nav> dengan aria-label="breadcrumb" untuk aksesibilitas.
  2. Didalamnya, kita memiliki daftar berurutan (<ol>) dengan kelas breadcrumb.
  3. Setiap item di breadcrumb adalah item daftar (<li>) dengan kelas breadcrumb-item.
  4. Kelas active dan atribut aria-current="page" menandakan halaman saat ini.

Menambahkan Level Tertentu

Sekarang, mari kita tambahkan sedikit kedalaman ke breadcrumb kita:

<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>

Dalam contoh ini, kita memiliki tiga level:

  1. Home (terhubung)
  2. Perpustakaan (terhubung)
  3. Data (halaman saat ini, tidak terhubung)

Perhatikan bahwa hanya item terakhir yang memiliki kelas active dan atribut aria-current="page". Item lainnya adalah tautan, memungkinkan pengguna untuk kembali ke level sebelumnya.

Menyesuaikan Pemisah Breadcrumb

Secara default, Bootstrap menggunakan garis miring (/) sebagai pemisah antara item breadcrumb. Tetapi apa bila Anda ingin sesuatu yang berbeda? Mari kita kreatif!

Menggunakan CSS untuk mengubah pemisah

Tambahkan CSS ini ke stylesheet Anda:

.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}

Ini mengubah pemisah menjadi tanda kurang dari (>). Jangan khawatir untuk mencoba karakter lainnya atau bahkan emoji! ?➡️?

Menggunakan pemisah bawaan Bootstrap

Bootstrap 5 memperkenalkan cara baru untuk mengubah pemisah menggunakan HTML:

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

Di sini, kita menggunakan atribut style untuk mengatur variabel CSS --bs-breadcrumb-divider. Mudah-mudahan!

Menambahkan Icon ke Breadcrumb

Ingin membuat breadcrumb Anda lebih menarik secara visual? Mari kita tambahkan beberapa icon!

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i> Home</a></li>
<li class="breadcrumb-item"><a href="#"><i class="fas fa-book"></i> Perpustakaan</a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-database"></i> Data</li>
</ol>
</nav>

Dalam contoh ini, kita menggunakan icon Font Awesome, tetapi Anda dapat menggunakan pustaka icon lainnya. Pastikan untuk menyertakan file CSS dan JavaScript yang diperlukan untuk set icon yang Anda pilih.

Breadcrumb Responsif

Sebagai guru lingkungan yang ramah, saya harus menekankan pentingnya desain responsif. Mari kita buat breadcrumb yang terlihat bagus di semua perangkat:

<nav aria-label="breadcrumb">
<ol class="breadcrumb flex-wrap">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Nama Kategori yang Panjang</a></li>
<li class="breadcrumb-item"><a href="#">Subkategori Lainnya yang Panjang</a></li>
<li class="breadcrumb-item active" aria-current="page">Halaman Saat Ini dengan Judul Panjang</li>
</ol>
</nav>

Kelas flex-wrap memungkinkan item breadcrumb untuk melengkung ke baris berikutnya pada layar yang lebih kecil, mencegah horizontal scrolling.

Pertimbangan Aksesibilitas

Sebagai pengembang yang bertanggung jawab, kita harus selalu memikirkan aksesibilitas. Berikut adalah beberapa tips:

  1. Gunakan atribut ARIA yang benar (aria-label, aria-current)
  2. Pastikan kontras warna mencukupi
  3. Pastikan tautan dapat diakses melalui papan ketik

Menyusun Segala Hal

Mari kita buat contoh komprehensif yang mencakup semua yang kita pelajari:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Breadcrumb Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
.breadcrumb-item + .breadcrumb-item::before {
content: "➡️";
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap Breadcrumb Demo</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb flex-wrap">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i> Home</a></li>
<li class="breadcrumb-item"><a href="#"><i class="fas fa-book"></i> Perpustakaan</a></li>
<li class="breadcrumb-item"><a href="#"><i class="fas fa-laptop-code"></i> Pengembangan Web</a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-bootstrap"></i> Bootstrap</li>
</ol>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Contoh ini mencakup pemisah khusus, icon, desain responsif, dan atribut aksesibilitas yang benar.

Kesimpulan

Selamat! Anda telah menemukan seni membuat breadcrumb Bootstrap. Dari implementasi dasar hingga kostumisasi tingkat lanjut, Anda sekarang memiliki alat untuk memandu pengguna Anda melalui situs web Anda dengan gaya dan efisiensi.

Ingat, breadcrumb adalah seperti jejak digital yang Anda tinggalkan untuk pengguna Anda. Mereka membantu menghindari pengguna dari kebingungan dalam struktur situs web Anda. Gunakan mereka bijaksana, dan pengguna Anda akan berterima kasih!

Semangat coding, dan may your breadcrumbs always lead to great user experiences! ?✨

Metode Deskripsi
Implementasi Dasar Gunakan elemen <nav>, <ol>, dan <li> dengan kelas Bootstrap
Menambahkan Level Tertentu Buat hierarki dengan tautan dan item aktif
Menyesuaikan Pemisah Gunakan CSS atau variabel pemisah bawaan Bootstrap
Menambahkan Icon Sertakan pustaka icon untuk penampilan visual
Desain Responsif Gunakan flex-wrap untuk pengalaman mobile yang baik
Aksesibilitas Implementasikan atribut ARIA yang benar dan pastikan navigasi papan ketik

Credits: Image by storyset

Tutorial Sebelumnya:
Bootstrap - Demo Badge
Tutorial Selanjutnya:
Bootstrap - Demo Jumbotrons