Breadcrumb

Breadcrumb menunjukkan letak halaman yang sedang dibuka dalam struktur situs atau aplikasi. Komponen ini biasanya ditampilkan sebagai deretan tautan berurutan yang membantu pengguna melihat jalur navigasi dengan jelas.

Penggunaan

Gunakan Breadcrumb untuk membantu pengguna mengetahui posisi mereka di dalam situs atau aplikasi, serta memudahkan mereka kembali ke halaman sebelumnya tanpa harus mengulang proses navigasi dari awal.

Anatomi

Breadcrumb terdiri dari dua elemen utama.

Kategori

Default

Menampilkan foto atau ilustrasi pengguna. Ideal digunakan saat identitas visual penting, seperti pada halaman profil atau daftar tim.

Overflow

Varian overflow digunakan ketika terdapat lebih dari empat page link dalam satu jalur navigasi.

Cara Penggunaan yang Disarankan

Denominasi menu

✅ Disarankan

Tampilkan maksimal 4 page link. Jika terdapat lebih dari 4 page link, gunakan dropdown menu untuk menampung page link ke-2 dan ke-3 dan sisa lainnya.

❌ Dihindari

Menampilkan semua page link sekaligus karena membuat tampilan tidak efisien.

Elipsis di Judul

✅ Disarankan

Gunakan tanda elipsis (…) jika jumlah karakter pada page link lebih dari 24.

❌ Dihindari

Menampilkan judul page link yang terlalu panjang karena dapat mengganggu keterbacaan.

Konsistensi

✅ Disarankan

Pastikan page link pertama dan terakhir selalu terlihat untuk menjaga kejelasan hierarki navigasi.

❌ Dihindari

Jangan sembunyikan page link pertama karena dapat membingungkan pengguna mengenai posisi mereka dalam hierarki navigasi.

Penerapan

Menu Judul

•Panjang judul page link yang disarankan tidak lebih dari 24 karakter.

•Gunakan gaya penulisan sentence case untuk judul menu, misalnya “Profil pengguna”.

•Gunakan kata-kata yang familiar dengan memilih label yang sesuai dengan ekspektasi pengguna.

Dropdown Menu

Di dalam dropdown, tampilkan judul halaman secara penuh meskipun melebihi 24 karakter.

Halaman Turunan

Tempatkan breadcrumb di bagian atas halaman turunan untuk membantu pengguna memahami konteks dan posisi mereka di dalam struktur informasi.

Spesifikasi