1. HTML Yapısı Oluşturma: Breadcrumb için bir liste (sıralı veya sırasız) oluşturun ve bu listeye bağlantılar ekleyin 24.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
Kopyala

2. CSS ile Stillendirme: Breadcrumb öğelerini CSS kullanarak biçimlendirin 13.

.breadcrumb {
  list-style: none;
  background: #f8f8f8;
  padding: 10px;
}
.breadcrumb-item {
  display: inline-block;
}
.breadcrumb-item + .breadcrumb-item:before {
  content: ">";
  padding: 0 10px;
}
.breadcrumb-item a {
  text-decoration: none;
}
.breadcrumb-item.active {
  color: #6c757d;
}
Kopyala

3. Ek Fonksiyonellik (Opsiyonel): Dinamik breadcrumb için JavaScript ekleyebilirsiniz 1.