Kembali lagi di seri Tutorial Belajar Bootstrap 4 untuk Pemula ke-tujuh. Sebelumnya kita sudah sama-sama belajar bagaimana cara membuat Badges di bootstrap 4. Pada kesempatan kali ini kita akan mencoba membuat breadcrumb di bootstrap 4.
Apa sih itu breadcrumb? Kalau kita translate dengan kata yang terpisah yaitu bread dan crumb hasil google translate berarti Remah roti. lalu apa itu? yang jelas bukan makanan ya hehe.. Remah roti yang dimaksud disini adalah sebuah kata ibarat yang menggambarkan tentang remah roti dimana breadcrumb berfungsi untuk memecah beberapa kata atau kalian menjadi sebuah objek yang berbeda.
Bagaimana sih bentuk breadcrumb ?
Contoh breadcrumb pada bootstrap 4 seperti gambar dibawah ini :
Saya akan sedikit menjelaskan dari gambar diatas bahwa breadcrumb biasanya digunakan pada sebuah website untuk memberikan batasan antar link seperti kategori, postingan, dan halaman-halaman pada website.
Bagaimana cara membuat breadcrumb?
Sekarang kita akan mencoba membuat breadcrumb menggunakan framework css bootstrap versi terbaru saat ini yaitu versi 4.
Untuk itu seperti biasa karena ini seri tutorial bootstrap untuk pemula maka kamu harus baca cara persiapannya terlebih dahulu sebelum melanjutkan tutorial ini.
Silahkan baca tutorial nya di sini : Persiapan Awal untuk Ngoding
Buka file index.php yang telah kita persiapkan lalu copy kode dibawah ini :
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<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>
Sehingga jika dilihat kode dari file index.php keseluruhannya akan seperti ini :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<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>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Save. lalu kita ke browser dan buka project website teman-teman, disini saya membuat nama foldernya bootstrap4 jadi saya akan mengunjungi http://localhost/bootstrap4/
Pada baris pertama hanya ada satu link yaitu home yang mempunyai class active sehingga kita akan dianggap berada pada halaman home yang membuat tombolnya jadi berwarna abu-abu alias tidak merupakan link lagi.
Baris kedua memiliki dua buah link yaitu home dan library yang pertama home merupakan link yang tidak aktif jadi masih dianggap sebuah link sehingga masih berwarna biru sebaliknya library dianggap class aktif seperti baris pertama.
Baris ketiga hampir sama dengan yang lainnya hanya saja ada tiga buah link yaitu home, library dan data.
Akhir Kata
Itulah bagaimana cara membuat breadcrumb pada bootstrap yang pasti ada pada semua website di dunia dan digunakan untuk pemisah antar link pada sebuah kategori dan kebutuhan lainnya. jangan lupa baca seri tutorial bootstrap 4 untuk pemula lainnya di blog afrizatul.com ya. see u