Cara Membuat Breadcrumb

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari November 30, 2020

Pelajari cara membuat navigasi link breadcrumb dengan CSS.

Section Artikel

1 Cara Membuat Navigasi Breadcrumb
- 1.1 Langkah 1) Tambahkan HTML
- 1.2 Langkah 2) Tambahkan CSS

Cara Membuat Navigasi Breadcrumb

Navigasi breadcrumb menyediakan link back ke setiap laman sebelumnya yang dinavigasi pengguna, dan menunjukkan lokasi pengguna saat ini di situs web.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Breadcrumb Pagination</h2>
<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

</body>
</html>

Langkah 1) Tambahkan HTML

Contoh:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

Langkah 2) Tambahkan CSS

Contoh:

/* Beri Style pada list */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* Menampilkan item list secara berdampingan */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* Tambahkan simbol garis miring (/) sebelum/di belakang setiap item list */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Aberi warna ke semua link di dalam list */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Tambahkan warna saat mengarahkan mouse */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

How To