Bootstrap - Navigation Demo

Apa Itu Navbar?

Hai teman-teman pengembang web yang bersemangat! Hari ini, kita akan masuk ke dunia yang menarik dari batang navigasi Bootstrap, atau seperti yang kami biasa panggil, "navbars." Bayangkan Anda membangun sebuah rumah - navbar adalah seperti koridor yang menghubungkan semua kamar. Itu adalah hub pusat yang membantu pengunjung bergerak di situs web Anda dengan mudah.

Navbar adalah komponen navigasi yang kuat yang berada di bagian atas halaman web Anda, menyediakan tautan ke berbagai bagian atau halaman situs web Anda. Itu seperti peta untuk pengunjung Anda, memandu mereka melalui lingkungan digital Anda.

Mengapa Menggunakan Bootstrap untuk Navbars?

Bootstrap, teman-teman, adalah seperti kit superhero bagi pengembang web. Itu datang dengan komponen yang terdesain sebelumnya yang membuat kehidupan kita lebih mudah. Menggunakan Bootstrap untuk navbars berarti:

1. Keserasian di berbagai perangkat (reponsive design)
2. Mudah untuk dikustomisasi
3. Dukungan bawaan untuk berbagai pola navigasi

Sekarang, mari kita lipat lengan dan mulai membangun!

Struktur Navbar Dasar

Ini adalah struktur dasar dari navbar Bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand Anda</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Beranda <span class="sr-only">(aktif)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fitur</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Harga</a>
</li>
</ul>
</div>
</nav>

Mari kitauraikan ini:

1. <nav class="navbar navbar-expand-lg navbar-light bg-light">: Ini adalah wadah navbar utama kami. Kelas-kelas ini menentukan penampilan dan perilaku nya.
2. <a class="navbar-brand" href="#">: Ini adalah tempat bagi nama brand atau logo Anda.
3. <button class="navbar-toggler">: Tombol ini muncul di layar kecil untuk menutup navbar.
4. <div class="collapse navbar-collapse">: Ini berisi item navbar yang akan collapse di layar kecil.
5. <ul class="navbar-nav">: Daftar tak berurutan ini berisi item navigasi kita.
6. <li class="nav-item">: Setiap item daftar mewakili item navigasi.

Menyesuaikan Navbar Anda

Mengubah Warna

Bootstrap menawarkan berbagai skema warna. Mari kita cobalah navbar gelap:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Konten Navbar -->
</nav>

Di sini, kita mengubah navbar-light bg-light menjadi navbar-dark bg-dark. Itu seperti memberikan navbar Anda penampilan malam yang elegan!

Menambahkan Form Pencarian

Ingin menambahkan fitur pencarian? Ini caranya:

<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Cari" aria-label="Cari">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cari</button>
</form>

Tambahkan ini di dalam navbar-collapse Anda. Itu seperti menambahkan kacamata pembesar ke koridor navigasi Anda!

Menu Dropdown

Mari kita tambahkan menu dropdown untuk membuatnya lebih menarik:

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Aksi</a>
<a class="dropdown-item" href="#">Aksi lainnya</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>

Ini akan membuat menu dropdown dalam navbar Anda. Itu seperti menambahkan kamar rahasia ke koridor navigasi Anda!

Perilaku Responsif

Navbar Bootstrap secara default responsif. Di layar kecil, navbar collapse menjadi tombol toggle (sering disebut "menu hamburger"). Hal ini memastikan navigasi Anda dapat digunakan di semua perangkat.

Untuk melihat ini dalam tindakan, cobalah mengubah ukuran jendela browser Anda. Anda akan melihat item navbar menghilang dan tombol toggle muncul. Menekan tombol ini akan menampilkan item navigasi Anda dalam format dropdown.

Praktik Terbaik

1. Simpel saja: Jangan membanjiri pengguna dengan terlalu banyak pilihan.
2. Gunakan label yang jelas: Pastikan item navigasi Anda mudah dipahami.
3. Tandai halaman aktif: Gunakan kelas active untuk menunjukkan pengguna dimana mereka berada.
4. Pertimbangkan brand Anda: Pilih warna dan gaya yang cocok dengan desain keseluruhan Anda.

Kesimpulan

Selamat! Anda telah membuat navbar Bootstrap pertama Anda. Ingat, latihan membuat sempurna. Cobalah kombinasi yang berbeda, mainkan warna, dan terutama, bersenang-senang!

Berikut adalah tabel yang menggabungkan kelas Bootstrap utama yang kita gunakan:

Kelas	Tujuan
navbar	Menentukan wadah navbar utama
navbar-expand-lg	Mengatur titik pembukaan navbar
navbar-light/dark	Mengatur skema warna navbar
bg-light/dark	Mengatur warna latar navbar
navbar-brand	Menggaya area brand/logo
navbar-toggler	Membuat tombol toggle untuk layar kecil
navbar-nav	Menggaya daftar navigasi
nav-item	Menggaya item navigasi individual
nav-link	Menggaya tautan dalam item navigasi
dropdown-toggle	Membuat toggle dropdown
dropdown-menu	Menggaya wadah menu dropdown
dropdown-item	Menggaya item dalam menu dropdown

Sekarang pergi dan buat navbar yang menakjubkan! Ingat, setiap website yang bagus dimulai dengan navigasi yang bagus. Selamat coding!

Credits: Image by storyset