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.

tunggu sebentar...
POS Lainnya:

Tinggalkan Komentar

avatar

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi