Apa Itu BreadCrumbs ? Bagaimana Cara Membuatnya di Bootstrap ?


Apa itu BreadCrumb ? Bahasa Indonesianya adalah potongan roti, dianggap sebagai potongan roti karena pada umumnya BreadCrumb dipisahkan dengan garis miring (/). Contoh: Home / Kategori / Sub Kategori / Judul. BreadCrumb mengindikasi halaman yang sedang dibuka saat ini dengan navigasi hirarki.

Tidak semua situs menggunakan breadcrumbs, karena pada dasarnya menu navigasi pada header sudah cukup mewakili dan membantu para pengunjung untuk mendapatkan arah. Tapi, situs yang menampilkan BreadCrumb akan lebih memudahkan pengunjungnya jika ingin mengunjungi parent dari halaman yang sedang dibuka karena biasanya BreadCrumb berisi link.

Jika membangun situs web / blog menggunakan framework Bootstrap, membuat BreadCrumb bukanlah hal yang sulit. Cukup gunakan class yang disediakan untuk menampilkan BreadCrumb yaitu class breadcrumb.

<h2>Breadcrumbs Bootstrap - Posciety</h2>                  
  <ul class="breadcrumb">
    <li><a href="https://www.posciety.com" target="_blank">Home</a></li>
    <li><a href="https://www.posciety.com" target="_blank">Kategori</a></li>
    <li><a href="https://www.posciety.com" target="_blank">Sub Kategori</a></li>
    <li class="active">Halaman yang Sedang Dibuka</li>
  </ul>

Pada BreadCrumbs Bootstrap, ketika li breadcrumbs diberikan class active maka itu adalah current page (halaman yang sedang aktif/ sedang dibuka) dan biasanya tidak memerlukan link. Dari struktur kode diatas, akan tampil seperti ini:

gambar 1 - breadcrumbs bootstrap

Garis miring yang ditampilkan sebagai pemisah terlihat seperti membelah antara bagian depan dan bagian selanjutnya, itulah mengapa dikatakan BreadCrumbs 😀

Beberapa situs modern saat ini tidak terpaku dengan garis miring, ada yang mengubahnya dengan tanda > dab tanda lainnya sesuai desain masing-masing situs.


Jangan Lupa Share !!!

65
10 shares, 65 points

Apa Reaksimu ?

Bingung Bingung
2
Bingung
Kesal Kesal
10
Kesal
OMG OMG
2
OMG
Takut Takut
1
Takut
Keren Keren
10
Keren
Sedih Sedih
4
Sedih
Posciety Edu

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan artikel-artikel edukasi dunia yang mendidik. Dikelola oleh tim Posciety Edu.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki