Dalam pembahasan kali ini kita akan membahas mengenai komponen bootstrap yang saya yakin banyak ditemui oleh teman – teman ketika membuka halaman situs yaitu Breadcrumb.
Komponen Breadcrumb ini bukan “remah roti” ya teman – teman. Breadcrumb ini merupakan komponen bootstrap yang digunakan untuk menunjukan lokasi halaman saat ini (yang dibuka user) dalam bentuk hirarki navigasi. Breadcrumb sangat mempermudah user untuk mengetahui hirarki dari website kita sehingga menimbulkan kesan lebih tertata, teratur, dan user-friendly tentunya.
Untuk selanjutnya, sebelum membahas lebih lanjut saya sarankan sekali lagi untuk teman teman yang belum mengerti bagaimana memasukkan bootstrap ke dalam script website untuk membuka Cara memasukkan bootstrap.
Mari kita mulai !!
Breadcrumb
Sudah sama sama kita ketahui mengenai bootstrap yang memiliki banyak sekali class-class yang dapat digunakan untuk membuat sebuah komponen penunjang. Salah satunya yaitu untuk membuat breadcrumb. Breadcrumb pada bootstrap dibuat dengan memasukkan class:
.breadcrumb
Class ini ditempatkan pada tag <ol> atau tag <ul>, nah ada beberapa sub – class yang ada dalam breadcrumb ini yaitu class .breadcrumb-item -> digunakan untuk mendefinisikan item-item dari breadcrumb yang ingin ditambahkan. Banyak sub class ini digunakan terserah kebutuhan teman – teman dengan tinggal menambahkan nya ke dalam tag <li>.
Nah, dari sini pasti teman- teman mungkin ada pertanyaan bagaimana kita memberi tanda mana halaman website yang aktif dengan yang tidak aktif. Untuk hal ini menggunakan class .active.
contoh nya:
Breadcrumb dasar :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap Breadcrumb</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item" aria-current="page">Home</li> </ol> </nav> </div> </body> </html>
Breadcrumb dengan link:
Untuk membuat breadcrumb yang berisi link tinggal menambahkan tag <a> didalam tag <li>, contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Breadcrumb</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Produk</a></li>
<li class="breadcrumb-item active" aria-current="page">Profil</li> <!-- page user saat ini -->
</ol>
</nav>
</div>
</body>
</html>Sekian tutorial mengenai breadcrumb ya teman – teman, untuk hal hal lain seperti mengganti ikon pemisah antar komponen breadcrumb bisa dilakukan melalui CSS, atau penempatan dari breadcrumb bisa teman – teman atur dengan CSS juga.
