Navigasi adalah elemen penting dalam sebuah website, dan dengan cara membuat navbar responsif dengan dropdown menggunakan Bootstrap, kamu bisa menghadirkan tampilan menu yang profesional, rapi, serta mudah diakses di berbagai ukuran layar. Bootstrap, sebagai framework CSS populer, menawarkan berbagai komponen siap pakai, termasuk navbar dan dropdown menu. Keduanya dapat dengan mudah dikombinasikan untuk menciptakan navigasi yang dinamis dan mobile-friendly tanpa perlu menulis CSS dari nol. Tutorial ini akan membahas langkah-langkah membuat navbar responsif dengan dropdown di Bootstrap, beserta tips dan praktik terbaik agar hasilnya maksimal.
Mengapa Perlu Navbar Responsif dengan Dropdown
Sebuah navbar responsif memastikan tampilan menu menyesuaikan ukuran layar, baik di desktop, tablet, maupun smartphone. Sementara itu, dropdown memudahkan pengguna mengakses sub-menu tanpa menambah panjang navbar.
Kombinasi keduanya memberikan beberapa keuntungan:
-
User experience meningkat karena tampilan tetap rapi di berbagai perangkat.
-
Struktur menu lebih teratur untuk website dengan banyak halaman.
-
Mudah diterapkan menggunakan class Bootstrap tanpa coding rumit.
Contohnya, website e-commerce dengan kategori seperti “Produk”, “Tentang Kami”, dan “Kontak” dapat menambahkan dropdown pada menu “Produk” agar menampilkan sub-kategori seperti “Elektronik”, “Fashion”, atau “Makanan”.
Persiapan Awal: Memasang Bootstrap
Langkah pertama dalam membuat navbar responsif dengan dropdown menggunakan Bootstrap adalah menambahkan Bootstrap ke dalam proyekmu.
Ada dua cara: via CDN atau mengunduh manual. Cara paling cepat adalah menggunakan CDN. Tambahkan kode berikut di bagian <head> HTML-mu:
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Navbar Bootstrap</title> <!-- Link Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body>
Dan sebelum tag </body> tutup, tambahkan file JavaScript Bootstrap agar dropdown berfungsi:
<!-- Script Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Setelah Bootstrap terhubung, kamu siap membuat navbar.
Membuat Struktur Dasar Navbar
Bootstrap menyediakan komponen navbar yang sudah siap digunakan. Berikut contoh dasar navbar sederhana tanpa dropdown:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tentang</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
</ul>
</div>
</div>
</nav>
Penjelasan singkat:
-
navbar-expand-lgmembuat navbar melebar di layar besar dan berubah jadi tombol (hamburger) di layar kecil. -
navbar-light bg-lightmengatur tema warna. -
ms-automendorong menu ke sisi kanan.
Menambahkan Dropdown Menu
Sekarang kita tambahkan dropdown di dalam navbar menggunakan komponen Bootstrap.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Produk
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Elektronik</a></li>
<li><a class="dropdown-item" href="#">Fashion</a></li>
<li><a class="dropdown-item" href="#">Makanan</a></li>
</ul>
</li>
Tambahkan kode tersebut di dalam <ul class="navbar-nav ms-auto">.
Dropdown ini akan muncul saat pengguna mengklik atau mengetuk menu “Produk”.
Contoh Lengkap Navbar Responsif dengan Dropdown
Berikut contoh navbar lengkap dengan kombinasi responsif dan dropdown:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tentang</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Produk
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Elektronik</a></li>
<li><a class="dropdown-item" href="#">Fashion</a></li>
<li><a class="dropdown-item" href="#">Aksesoris</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
</ul>
</div>
</div>
</nav>
Kamu bisa langsung menyalin kode ini ke dalam file index.html untuk melihat hasilnya.
Navbar ini akan otomatis berubah menjadi tombol hamburger di layar kecil dan dropdown-nya tetap berfungsi.
Menyesuaikan Warna dan Gaya Navbar
Bootstrap menyediakan banyak kelas warna seperti:
-
bg-light navbar-light→ untuk warna terang. -
bg-dark navbar-dark→ untuk warna gelap. -
bg-primary,bg-success,bg-danger, dll → untuk tema berwarna.
Kamu juga bisa menambahkan CSS kustom untuk gaya lebih unik:
.navbar-brand {
font-weight: bold;
letter-spacing: 1px;
}
.nav-link:hover {
color: #00d1b2 !important;
}
Tambahkan CSS ini di file terpisah atau di dalam tag <style> agar navigasimu terlihat lebih menarik dan sesuai identitas brand.
Tips Optimasi Navbar untuk User Experience
Agar navbar kamu tidak hanya fungsional tapi juga nyaman digunakan, ikuti beberapa tips berikut:
-
Gunakan teks singkat untuk menu utama.
Hindari nama menu terlalu panjang agar tidak memakan ruang. -
Atur urutan menu sesuai prioritas.
Letakkan menu penting seperti “Beranda” atau “Produk” di sebelah kiri. -
Pastikan dropdown tidak terlalu banyak level.
Dropdown bertingkat bisa membingungkan pengguna di perangkat mobile. -
Gunakan sticky navbar jika perlu.
Tambahkan classfixed-topagar navbar selalu terlihat saat pengguna menggulir halaman. -
Uji di berbagai perangkat.
Gunakan inspect element di browser untuk melihat tampilan di ukuran layar berbeda.
Kesimpulan
Membuat navbar responsif dengan dropdown menggunakan Bootstrap adalah langkah penting untuk menciptakan navigasi modern dan mudah digunakan di berbagai perangkat. Dengan hanya beberapa baris HTML dan class bawaan Bootstrap, kamu sudah bisa memiliki menu navigasi profesional lengkap dengan fitur dropdown. Selain memudahkan pengguna menjelajahi situs, tampilan responsif juga meningkatkan pengalaman pengguna dan kredibilitas website-mu.
Jadi, jika kamu ingin website terlihat rapi dan fungsional tanpa harus menulis CSS dari nol, gunakan Bootstrap untuk membuat navbar responsif dengan dropdown sekarang juga.