Breadcrumb Links: Navigasi untuk Lokasi Halaman di Struktur Menu atau Navigasi untuk Halaman Master/Detail

Apa sih Breadcrumb Links itu?

Breadcrumb Links adalah navigasi bantuan yang digunakan oleh suatu aplikasi untuk menunjukkan lokasi dari suatu halaman yang sedang terbuka. Hal ini memungkinkan pengguna untuk mengetahui lokasi dari suatu halaman dengan cepat tanpa harus menebak dengan membuka-buka menu di aplikasi.

Breadcrumb Links biasanya ditampilkan secara horizontal dan ditempatkan di bagian paling atas dari sebuah halaman Aplikasi Web yang sedang terbuka. Lokasinya bisa juga tepat di bawah header. Sampai saat ini saya belum menemukan terjemahan baku dalam Bahasa Indonesia dari istilah Breadcrumb Links, jadi kita tetap menggunakan istilah aslinya saja, ya… 

Breadcrumb Links menyediakan jejak bagi pengguna untuk mengikuti kembali asal atau lokasi dari halaman yang sedang dikunjungi itu berada. Biasanya, jejak itu dipisahkan dengan karakter atau tanda lebih besar (>) dan sering kali digunakan sebagai karakter pemisah yang standar.

Meskipun demikian, Web Designer bisa saja menggunakan karakter lainnya (seperti » atau › atau /). Ada juga yang menggunakan beragam icon grafik lainnya yang mencerminkan tanda pemisah tadi.

Tipe Breadcrumb Links

Ada dua tipe Breadcrumb Links berdasarkan pengalaman saya dalam menangani Breadcrumb Links di aplikasi berbasis web, yaitu:

1. Navigasi Lokasi Halaman di Struktur Menu
   Breadcrumb Links ditampilkan dalam struktur hirarki menu di mana halaman tersebut berada. Artinya, link ke halaman induk dari halaman yang sedang terbuka akan ditampilkan di Breadcrumb Links berdasarkan hirarki halaman tersebut ditempatkan dalam struktur menu. Pengguna dapat langsung melompat ke menu induk atau menu yang ada di atasnya dari Breadcrumb Links tersebut.
   Contoh: Halaman atau sub-menu “Pegawai” ditempatkan di bawah menu: “Sumber Daya”, maka Breadcrumb Links akan ditampilkan menjadi: “Beranda > Sumber Daya > Pegawai”. Link akan terdapat di kata “Beranda” dan “Sumber Daya”, sehingga memungkinkan pengguna dapat langsung melompat ke menu induk atau menu yang berada di atasnya. Jadi, link ke menu “Sumber Daya” akan ditampilkan tanpa harus membuka terlebih dahulu menu induknya.
   
   
   Keuntungan dari tipe ini, pengunjung dapat mengetahui dengan cepat lokasi dari halaman yang sedang dikunjungi berdasarkan struktur menu di aplikasi web tersebut. Artinya, informasi yang terdapat di Breadcrumb Links benar-benar sesuai dengan struktur menu aplikasi, dan yang pasti, akan lebih masuk akal dibandingkan dengan Breadcrumb Links tipe yang kedua di bawah ini.
   Kelemahannya, Web Developer harus mengelola secara khusus data Breadcrumb Links. Misalnya dengan menyediakan tabel khusus untuk menyimpan record-record Breadcrumb Links tersebut. Selain itu, jika lokasi halaman tersebut di struktur menu berubah (misal dipindahkan ke induk menu yang lainnya), maka data Breadcrumb Links juga harus ikut disesuaikan secara manual (tidak otomatis).
2. Link untuk Halaman Master/Detail
   Breadcrumb Links terdiri atas link ke setiap halaman yang telah dikunjungi sebelumnya hingga bisa mendapatkan halaman yang sedang dikunjungi oleh pengguna. Artinya, link yang ditampilkan di Breadcrumb Links hanya akan muncul jika pengguna sudah pernah mengunjungi halaman Master dari halaman Detail yang sedang terbuka. Itulah mengapa saya istilahkan dengan Link untuk Halaman Master/Detail.
   Contoh: Halaman “Detail Pesanan” merupakan detail dari halaman “Pesanan” (master). Ketika pengunjung langsung membuka halaman “Detail Pesanan”, maka Breadcrumb Links yang akan ditampilkan adalah: “Beranda > Detail Pesanan”. Tapi, jika seandainya pengguna membuka terlebih dulu halaman master-nya (Pesanan), kemudian dari halaman “Pesanan” tadi mengklik link untuk menampilkan data detailnya, maka Breadcrumb Links akan menampilkan: “Beranda > Pesanan > Detail Pesanan”.
   Keuntungan dari tipe ini, tidak membutuhkan penanganan data Breadcrumb Links secara khusus, karena bisa mengandalkan variabel di session aplikasi.
   Kelemahannya, pengunjung sering kali kecewa ketika mengetahui lokasi di Breadcrumb Links tidak sesuai dengan lokasi halaman tersebut pada struktur menu aplikasi.

Sumber :

http://www.masinosinaga.com/web-development/breadcrumb-links-navigasi-untuk-lokasi-halaman-di-struktur-menu-atau-navigasi-untuk-halaman-master-detail/