Membuat Breadcrumb Menarik Dengan Bootstrap

Dalam artikel ini, saya akan membahas tentang penggunaan framework css yang sudah sangat terkenal yaitu bootstrap. Jadi, nanti bootstrap ini akan saya gunakan untuk mempercantik sebuah tampilan dari breadcrumbs. Apa itu breadcrumbs? intinya breadcrumbs berfungsi sebagai salah satu navigasi dalam suatu website untuk memudahkan user melihat di posisi mana dia berada sekarang, Contohnya dapat anda lihat pada gambar di atas pada postingan ini. Namun, jika kalian ingin mendapatkan pengertian lebih jelasnya, kalian dapat mencarinya di google ya..heheheh.

Ok dari judul artikel ini yaitu Membuat Breadcrumb Menarik Dengan Bootstrap, maka tentunya kalian sudah menyiapkan atau mendownload terlebih dahulu framework bootstrapnya, setelah itu kalian bisa ikuti script di bawah ini :  

Script HTML

<div class="container">
  <div class="row">
   <h2>
Breadcrumb </h2>
<div class="btn-group btn-breadcrumb">
             <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-home"></i></a>
             <a href="#" class="btn btn-default">Produk</a>
             <a href="#" class="btn btn-default">Makanan</a>
             <a href="#" class="btn btn-primary">Detail</a>
         </div>
</div>
</div>

Script CSS

.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;

}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

.btn-breadcrumb > a {
  height: 35px;
}

.btn-breadcrumb .btn {
  padding:6px 12px 6px 24px;
}
.btn-breadcrumb .btn:first-child {
  padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
}

/** Default button **/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

/** Primary button **/
.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
  border-left: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not(:last-child):before {
  border-left: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
  border-left: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before {
  border-left: 10px solid #285e8e;
}

Kemudian klik save dan jalankan menggunakan browser kesayangan kalian.

Selesai... Jika ada yang belum dipahami bisa tinggalkan komentar dibawah ya...

Baca Juga : Cara Mengganti Nav Tab Bootstrap Lebih menarik

Sumber : https://bootsnipp.com/