Membuat Breadcrumb Menggunakan Bootstrap 4

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.

Breadcrumb  Bootstrap 4

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 :

breadcrumb bootstrap 4

Leave a comment