Membuat breadcrumb dengan bootstrap 4

Setelah sekian lama rumah code tidak membahas tentang bootstrap 4 yaitu tentang membuat breadcrumb. Pada tutorial ini kita akan membuat breadcrumb menjadi lebih menarik.

Kalau teman teman masih ada yang belum tau dan belum mengerti tentang apa itu breadcrumb baik nya teman teman simak penjelasan di bawah.

Apa itu breadcrumb? Breadcrumb adalah sebuah struktur navigasi web yang bertujuan untuk menandakan pengunjung website itu berada di mana. Jadi tujuan memasang breadcrumb navigation adalah sebagai web navigasi.

Breadcrumbs Bootstrap 4

Breadcrumbs pada bootstrap 4 merupakan bagian dari bootstrap component.

Baca Juga : Bootstrap 4 - 04.1: Component

Membuat breadcrumb di bootstrap

Cara membuat breadcrumb dengan bootstrap sangatlah mudah kita cukup memasukan source code di bawah ini

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

Source code di atas adalah contoh breadcrumb bootstrap sederhana.

Breadcrumbs bootstrap template style

Untuk membuat breadcrumb menjadi lebih menarik saya akan tambahkan  class lain. Perhatikan contoh source code html di bawah

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-primary ">
    <li class="breadcrumb-item text-white"><a href="#" class="text-white">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-white">Halaman</a></li>
    <li class="breadcrumb-item active text-white" aria-current="page">Halaman Ini</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-danger ">
    <li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-white">Halaman</a></li>
    <li class="breadcrumb-item active text-white" aria-current="page">Halaman Ini</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark ">
    <li class="breadcrumb-item"><a href="#" class="text-warning">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-warning">Halaman</a></li>
    <li class="breadcrumb-item active text-white" aria-current="page">Halaman Ini</li>
  </ol>
</nav>

Merubah Separator pada breadcrumb

Secara default separator dari breadcrumb adalah slash ( / ), tapi separator ini dapat di rubah menjadi apa saja menjadi sesuai keingin kita cukup dengan menambahkan style css di bawah ini

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark">
    <li class="breadcrumb-item"><a href="#" class="text-warning">Home</a></li>
    <li class="breadcrumb-item" id="bc"><a href="#" class="text-warning">Halaman</a></li>
    <li class="breadcrumb-item active text-white" aria-current="page" id="bc">Halaman Ini</li>
  </ol>
</nav>

#bc::before {
    content: ">";
}

Demikian lah contoh web navigasi dengan breadcrumb semoga dapat membantu teman teman untuk membuat breadcrumb pada website atau blog nya. Jika teman teman dapat melihat demo nya di code pen.