Breadcrumb menampilkan hirarki dari sebuah page di halaman website. Pembuatan breadcrumb menggunakan bootsrap 4 di halaman web memberikan kemudahan kepada pengunjung web untuk mengetahui level page.
Level page yang dimaksud seperti post, kategori dan root.
Sebagai contoh halaman web memiliki breadcrumb seperti di bawah ini
Home I Bootstrap 4 | Daftar Tutorial Menggunakan Bootstrap 4
Home adalah root web
Bootstrap 4 adalah Categgori Postingan
Daftar Tutorial Menggunakan Bootstrap 4 adalah judul postingan
Dengan adanya breadcrumb seperti contoh di atas dengan mudah pengunjung web memahami struktur halaman web yang telah di navigasi oleh breadcrumb.
Cara Menggunakan Breadcrumb Bootstrap 4
Untuk menggunakan breadcrumb bootstrap 4 silahkan kunjungi halaman compononent breadcrumb di bawah ini:
https://getbootstrap.com/docs/4.4/components/breadcrumb/
Breadcrumb digunakan di dalam tag nav seperti berikut:
<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>
lalu baaimana mengambil data dari database dan menampilkannya secara di dinamis di breadcrumb.
Seperti yang kita lihat breadcrumb bootstrap 4 di atas menampilkan data html saja.
jika ingin menampilkan data dari database ke navigasi breadcrumb silahkan ikuti langkah berkut:
Cara menampilkan breadcrumb di halaman web
Sebelum memulai pembuatan breadcrumb ini pastikan project php yang dibuat telah di download dan terkoneksi ke template bootstrap.
Data dari database yang hendak di jadikan breadcrumb pastikan memiliki output array sebagai berikut :
Array ( [home] => Home [category] => Bootstrap 4 [post] => Daftar Tutorial Menggunakan Bootstrap 4 )
Jika Sudah data tersebut dapat kita tampilkan menggunakan script sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://localhost/indonetsource/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<?php
$post = array(
'home' => 'Home',
'category' => 'Bootstrap 4',
'post' => 'Daftar Tutorial Menggunakan Bootstrap 4'
);
?>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><?php echo $post['home'];; ?></a></li>
<li class="breadcrumb-item"><a href="#"><?php echo $post['category']; ?></a></li>
<li class="breadcrumb-item active" aria-current="page"><?php echo $post['post']; ?></li>
</ol>
</nav>
</div>
</body>
<script src="http://localhost/indonetsource/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/popper.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/bootstrap.min.js"></script>
</html>
Output breadcrumb
dari script di atas :
