Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

ID (Indonesia) Translation

Bootstrap - Breadcrumb: Panduan untuk Pemula

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

Bootstrap - Breadcrumb

Apa Itu Breadcrumbs?

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

Breadcrumbs adalah alat navigasi yang menunjukkan lokasi pengguna saat ini dalam hierarki situs web. Mereka biasanya ditampilkan sebagai baris tautan di bagian atas halaman, memungkinkan pengguna mudah navigasi ke halaman tingkat tinggi.

Mengapa Menggunakan Bootstrap Breadcrumbs?

Bootstrap, kerangka kerja CSS yang ramah di sekitar kita, membuat membuat breadcrumbs menjadi mudah. Itu menyediakan komponen yang sudah diwarnai sebelumnya yang kita dapat mudah implementasikan di halaman web kita. Jadi, daripada menciptakan kembali roda, kita dapat menggunakan breadcrumbs siap pakai Bootstrap dan menyesuaikan mereka sesuai kehendak hati kita!

Sekarang, mari kita roll up lengan dan mulai mengoding!

Breadcrumbs Dasar

Langkah 1: Menyiapkan Bootstrap

Pertama-tama, kita perlu menyertakan Bootstrap di dalam file HTML kita. Tambahkan baris berikut di dalam bagian <head> dari 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 pertamanya! Berikut adalah struktur dasar:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Beranda</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:

  1. Kita membungkus breadcrumb kita dalam elemen <nav> dengan aria-label="breadcrumb". Ini meningkatkan aksesibilitas bagi pembaca layar.
  2. Elemen <ol> dengan kelas breadcrumb membuat kontainer breadcrumb.
  3. Setiap <li> mewakili tingkat dalam hierarki breadcrumb.
  4. Kelas breadcrumb-item memberikan gaya untuk setiap item.
  5. 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: Beranda > Perpustakaan > Data

Langkah 3: Menambahkan Tautan

Untuk membuat breadcrumbs 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">Beranda</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 "Beranda" akan membawa Anda ke index.html, dan "Perpustakaan" ke library.html. Halaman saat ini ("Data") tidak memiliki tautan karena itu adalah tempat kita saat ini berada.

Pemisah

Secara default, Bootstrap menggunakan garis miring (/) sebagai pemisah antara item breadcrumb. Tetapi apa bila kita ingin kreatif dan menggunakan sesuatu yang lain? Mari kita eksplor 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="#">Beranda</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 kreatif? 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="#">Beranda</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 mengatur --bs-breadcrumb-divider menjadi string kosong dan secara manual menambahkan ikon segitiga Font Awesome antara item breadcrumb.

Praktik Terbaik Breadcrumb

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

  1. Simpel saja: Jangan sertakan setiap halaman di dalam jejak breadcrumb Anda. Tetapkan saja kategori utama.
  2. Gunakan label yang jelas: Pastikan label breadcrumb Anda pendek dan deskriptif.
  3. Jangan gunakan breadcrumbs di situs tunggal tingkat: Mereka paling berguna untuk situs dengan hierarki yang jelas.
  4. Tempatkan di bagian atas: Breadcrumbs biasanya ditempatkan di bagian atas halaman, di bawah navigasi utama.

Kesimpulan

Selamat! Anda telah belajar bagaimana membuat dan menyesuaikan breadcrumbs Bootstrap. Dari implementasi dasar hingga pemisah yang kreatif, Anda sekarang dilengkapi untuk mengarahkan pengguna Anda melalui situs Anda dengan gaya.

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

Terus latihan, terus eksplor, dan terutama, terus bersenang-senang dengan pengembangan web. Sampai jumpa lagi, selamat berkoding!

Credits: Image by storyset

Tutorial Sebelumnya:
Bootstrap - Lencana
Tutorial Selanjutnya:
Bootstrap - Tombol