Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Navigation atau navigasi merupakan bagian penting dalam sebuah website yang digunakan untuk membantu pengguna berpindah dari satu halaman ke halaman lainnya. Bootstrap menyediakan berbagai komponen navigation yang modern, responsive, dan mudah digunakan.
Dengan menggunakan Bootstrap, developer dapat membuat menu navigasi yang otomatis menyesuaikan dengan berbagai ukuran layar, baik desktop maupun mobile.
Navbar adalah komponen utama yang digunakan untuk membuat menu navigasi di bagian atas website.
Navbar biasanya berisi:
<nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">MyWebsite</a></div></nav>navbar → class utama navbarnavbar-expand-lg → navbar akan responsive pada layar besarnavbar-light bg-light → warna navbarMenu navigasi adalah daftar link yang digunakan untuk berpindah halaman.
<ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul>navbar-nav → container menunav-item → item menunav-link → link menuDropdown menu digunakan untuk menampilkan submenu ketika user mengklik atau hover menu tertentu.
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Produk</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Produk 1</a></li><li><a class="dropdown-item" href="#">Produk 2</a></li></ul></li>dropdown → container dropdowndropdown-toggle → tombol untuk membuka menudropdown-menu → isi dropdownBootstrap memungkinkan navbar menjadi responsive, artinya tampilan menu akan berubah sesuai ukuran layar.
Pada layar kecil (mobile), menu akan berubah menjadi tombol (hamburger menu).
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container"><a class="navbar-brand" href="#">Website</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="menu"><ul class="navbar-nav ms-auto"><li class="nav-item"><a class="nav-link" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">About</a></li></ul></div></div></nav>navbar-toggler → tombol menu mobilecollapse navbar-collapse → menu yang bisa dibuka/tutupms-auto → posisi menu ke kananCollapse digunakan untuk menyembunyikan dan menampilkan konten seperti menu navigasi pada layar kecil.
Fitur ini sangat penting untuk membuat tampilan website tetap rapi di perangkat mobile.
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#menuCollapse">Buka Menu</button><div class="collapse" id="menuCollapse"><div class="card card-body">Ini adalah menu yang bisa ditampilkan atau disembunyikan</div></div>collapse → class utama untuk menyembunyikan kontendata-bs-toggle="collapse" → memicu aksi buka/tutupdata-bs-target → target elemen yang dikontrolNavigation pada Bootstrap menyediakan berbagai komponen seperti navbar, menu navigasi, dropdown, dan collapse yang memudahkan developer dalam membuat sistem navigasi website yang modern dan responsive. Dengan fitur ini, website dapat memberikan pengalaman pengguna yang lebih baik karena navigasi menjadi lebih rapi, mudah diakses, dan menyesuaikan berbagai ukuran layar perangkat.