Apa Itu Breadcrumbs?

Langkah 2) Tambahkan CSS:

/* Style the list */

ul.breadcrumb {

  padding: 10px 16px;

  list-style: none;

  background-color: #eee;

}

/* Display list items side by side */

ul.breadcrumb li {

  display: inline;

  font-size: 18px;

}

/* Add a slash symbol (/) before/behind each list item */

ul.breadcrumb li+li:before {

  padding: 8px;

  color: black;

  content: "/\00a0";

}

/* Add a color to all links inside the list */

ul.breadcrumb li a {

  color: #0275d8;

  text-decoration: none;

}

/* Add a color on mouse-over */

ul.breadcrumb li a:hover {

  color: #01447e;

  text-decoration: underline;

}

Tips dan Trik dalam Menggunakan Breadcrumbs

1. Hanya Gunakan Breadcrumbs Jika Sesuai dengan Site Structure Anda.

Navigasi breadcrumbs memiliki struktur linier, jadi Anda hanya bisa menggunakannya jika sesuai dengan hierarki situs web Anda. Jika Anda memiliki halaman yang dapat diakses dari landing page yang berbeda, menggunakan navigasi breadcrumbs hanya akan membingungkan pembaca sehingga mereka terus mengakses halaman yang sama dari titik awal yang berbeda.

Selain itu, jika situs Anda relatif sederhana yang hanya memiliki  beberapa halaman, Anda sudah seharusnya tidak memerlukan pengggunaan breadcrumbs ini.

2. Kenali Audiens Anda

Praktik terbaik dalam navigasi breadcrumbs akan memaksa perancang web untuk menempatkan navigasi di bagian atas halaman--tetapi Apple, salah satu perusahaan besar di dunia, menentang logika ini dengan meletakkan navigasi runut breadcrumbs mereka di bagian bawah situs mereka. Pada akhirnya, Anda harus mengenali karakteristik audiens Anda.

Pelanggan Apple biasanya paham teknologi, dan kemungkinan akan mencari navigasi tersebut jika mereka membutuhkannya. Pertimbangkan kebutuhan pelanggan Anda, dan terapkan pengujian A atau B jika Anda tidak yakin.

3. Perhatikan Penempatan Breadcrumbs

Navigasi breadcrumbs yang Anda gunakan harus diposisikan dari kiri ke kanan, dengan posisi link terdekat ke kiri adalah beranda situs Anda, dan link terdekat ke kanan adalah laman pengguna saat ini.

Sebuah studi yang dilakukan Nielsen Norman Group menemukan bahwa pengguna menghabiskan 80% dari waktu mereka melihat bagian kiri halaman dan 20% melihat bagian sebelah kanan sehingga hal ini menjadi bukti yang kuat untuk mendesain posisi breadcrumbs dari kiri-ke-kanan. Plus, link yang paling berada di bagian kiri akan muncul sebagai awalan sehingga hal ini bisa menjadi faktor pemicu pemberian peringkat tertinggi di halaman pencarian.