#Bootstrap 4

Tutorial Bootstrap 4 #13 : Breadcrumb Bootstrap 4

Breadcrumb Bootstrap 4 – Masih di seri tutorial bootstrap lengkap bahasa indonesia. pada tutorial bootstrap 4 kali ini kita akan membahas sebuah komponen keren lagi yang sudah disediakan di bootstrap. yaitu breadcrumb.

Jika teman-teman mungkin ada yang belum mengetahui apa itu breadcrumb, maka pada tutorial ini akan kita bahas.

Breadcrumb adalah sebuah komponen pada website yang berguna sebagai penanda lokasi user sekarang ini pada website anda. Dengan adanya breadcrumb membuat website lebih terasa familiar bagi user atau pengguna.

Karena segala sesuatu yang dilakukan oleh user di website kita menjadi lebih terarah dan tidak membingungkan user.

Untuk mengikuti tutorial cara membuat breadcrumb ini, teman-teman wajib sudah mengerti cara menghubungkan dan menggunakan bootstrap.

Selangkapnya tentang penggunaan dan contoh breadcrumb akan kita bahas pada penjelasan berikut.

Breadcrumb Bootstrap 4

Seperti komponen-komponen bootstrap lainnya, bootstrap telah menyediakan banyak sekali class-class yang tinggal kita gunakan saja. Termasuk untuk membuat breadcrumb dengan mudah.

Cara Membuat Breadcrumb

berikut adalah contoh cara pembuatan breadcrumb di bootstrap 4.

<li class="breadcrumb-item"><a href="#">Data Siswa</a></li>

<li class="breadcrumb-item active" aria-current="page">Input Data Siswa</li>

</ol>

</nav>

Perhatikan contoh breadcrumb di atas. untuk membuat breadcrumb dengan bootstrap, kita tinggal menuliskan class .breadcrumb pada tag <ol> .. </ol>. atau tag <ul> .. </ul> juga bisa.

Selanjutnya tulis class .breadcrumb-item pada item-item breadcrumb nya yang ada pada elemen atau tag <li> .. </li>.

Tergantung berapa item yang ingin teman-teman buat, tinggal menambahkan element <li> nya lagi, sesuai jumlah yang diinginkan.

Oh ya, pada item breadcrumb nya ada 2 jenis item yang bisa dibuat, kita bisa membuat hyperlink yang mengarahkan ke halaman lain pada saat diklik, dan satunya lagi item aktif, biasanya item aktif ini bertujuan untuk memberitahukan user posisi halamannya sekarang. yang diberikan class .active.

Contoh Breadcrumb

Kita lihat beberapa contohnya sekaligus berikut.

<!doctype html>

<html>

<head>

<title>Tutorial Membuat Breadcrumb Dengan Bootstrap 4 - www.malasngoding.com</title>

</head>

<body>

<h3>Tutorial Membuat Breadcrumb Dengan Bootstrap 4</h3>

<h4><a href="https://www.malasngoding.com/breadcrumb-bootstrap-4/">www.malasngoding.com</a></h4>

</center>

<br/>

<h5>Contoh 1</h5>

</ol>

</nav>

<br/>

<h5>Contoh 2</h5>

<li class="breadcrumb-item active" aria-current="page">Data Siswa</li>

</ol>

</nav>

<br/>

<h5>Contoh 3</h5>

<li class="breadcrumb-item"><a href="#">Data Siswa</a></li>

<li class="breadcrumb-item active" aria-current="page">Input Data Siswa</li>

</ol>

</nav>

</div>

</body>

</html>

Dan hasilnya seperti berikut.

Breadcrumb Bootstrap 4

Seperti yang terlihat pada gambar di atas, breadcrumb yang kita buat dengan bootstrap telah berhasil.

Oke sekian tutorial cara membuat breadcrumb, sampai jumpa di tutorial selanjutnya.

Pada tutorial selanjutnya kita akan membahas komponen bootstrap 4 lainnya.

🙂

Download Source Code

Demo

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.