Anatomi
Terdiri dari rangkaian judul halaman yang memiliki hierarki sesuai dengan urutan halaman. Karena ini adalah komponen navigasi, halaman di mana pengguna sedang berada, perlu diberikan highlight.
Jenis dan variasi
Regular
Digunakan di atas background halaman yang berwarna cerah.
Inverted
Digunakan di atas background yang berwarna gelap.
Behaviors
Clickable
Judul halaman berperan sebagai tombol yang bisa pengguna klik untuk mengakses halaman sebelumnya.
Truncated
Jika urutan halaman sudah terlalu panjang atau pada layar kecil, gunakan pendekatan truncated Breadcrumbs (misalnya, “Beranda” > ... > “Halaman Saat Ini”)
Panduan penggunaan
Gunakan Breadcrumbs ketika kita perlu memberikan jejak visual ke pengguna saat menavigasi rangkaian halaman, terutama untuk tipe situs/platform yang memiliki hierarki halaman yang cukup banyak dan dalam.
Prominen namun tidak mencuri perhatian
Secara peletakan, Breadcrumbs digunakan di atas dan sisi kiri halaman (biasanya di bawah "main navigation"), posisi ini diharapkan agar Breadcrumbs tetap prominen walaupun komponen ini tergolong kecil dan tidak terlalu mencuri perhatian pengguna.
Ditampilkan secara ringkas
Urutan halaman yang terlalu banyak atau judul halaman yang terlalu panjang dapat menyebabkan distraksi. Jika menghadapi kasus tersebut, gunakan truncated Breadcrumbs dengan mempertahankan halaman urutan paling pertama, halaman kedua terakhir, dan halaman yang sedang diakses.
Panduan penulisan
Pastikan ringkas
Usahakan agar satu Breadcrumbs tidak melebihi dari 3 kata. Pastikan untuk memeriksa panjang tulisan di desain agar tidak terpotong.
Gunakan sentence case
Serta hindari tanda titik “.” di akhir kalimat.
Disarankan
Selalu gunakan Sentence case atau huruf kapital di awal kata. Kecuali untuk singkatan atau kata benda khusus.
Dihindari
Hindari penggunaan kapitalisasi yang tidak konsisten.
