Breadcrumbs merupakan salah satu elemen yang sering digunakan pada desain website. Secara harfiah, breadcrumbs dapat diartikan sebagai “roti remah” atau “serpihan roti”. Pada website, breadcrumbs digunakan sebagai fitur navigasi yang memudahkan pengguna dalam mengetahui posisi atau lokasi halaman yang sedang mereka akses. Pada artikel ini, kita akan membahas lebih dalam tentang apa itu breadcrumbs, manfaatnya, dan cara menggunakannya.
Pengertian Breadcrumbs
Breadcrumbs merupakan fitur navigasi yang sering digunakan pada website. Fitur ini biasanya ditempatkan di bagian atas halaman atau di bawah judul artikel. Breadcrumbs berfungsi sebagai petunjuk untuk memberikan informasi tentang posisi atau lokasi halaman yang sedang diakses oleh pengguna.
Manfaat Breadcrumbs
Breadcrumbs memiliki beberapa manfaat bagi pengguna dan pemilik website, di antaranya:
- Memudahkan pengguna dalam navigasi website.
- Memberikan informasi yang jelas tentang lokasi halaman yang sedang diakses.
- Meningkatkan pengalaman pengguna dalam mengakses website.
- Meningkatkan tingkat kepercayaan pengguna terhadap website.
- Meningkatkan SEO website dengan memberikan struktur yang jelas pada halaman website.
Cara Menggunakan Breadcrumbs
Breadcrumbs dapat dibuat dengan menggunakan kode HTML atau dengan menggunakan plugin pada platform website seperti WordPress. Berikut ini adalah cara membuat breadcrumbs menggunakan kode HTML:
- Buat elemen HTML dengan tag “nav” atau “div” dan berikan class “breadcrumbs”.
- Dalam elemen “nav” atau “div” tersebut, buat elemen HTML dengan tag “ul” dan berikan class “breadcrumb”.
- Dalam elemen “ul” tersebut, buat elemen HTML dengan tag “li” dan berikan class “breadcrumb-item”.
- Isi konten dari elemen “li” tersebut dengan link yang mengarah ke halaman yang dimaksud.
- Ulangi langkah 3 dan 4 untuk setiap halaman yang ingin ditambahkan pada breadcrumbs.
Berikut ini adalah contoh kode HTML untuk membuat breadcrumbs:
<nav class="breadcrumbs"><ul class="breadcrumb"><li class="breadcrumb-item"><a href="/">Beranda</a></li><li class="breadcrumb-item"><a href="/kategori/">Kategori</a></li><li class="breadcrumb-item active">Artikel Terbaru</li></ul></nav>
Pada contoh kode di atas, terdapat tiga halaman yang ditampilkan pada breadcrumbs, yaitu halaman beranda, kategori, dan artikel terbaru. Halaman artikel terbaru ditandai dengan class “active” untuk menunjukkan bahwa halaman tersebut merupakan halaman yang sedang diakses oleh pengguna.
Kesimpulan
Breadcrumbs merupakan fitur navigasi yang penting pada website. Fitur ini memudahkan pengguna dalam navigasi dan memberikan informasi yang jelas tentang lokasi halaman yang sedang diakses. Dengan menggunakan breadcrumbs, pengalaman pengguna dalam mengakses website dapat ditingkatkan. Selain itu, breadcrumbs juga dapat meningkatkan SEO website dengan memberikan struktur yang jelas pada halaman website.
