Daftar Isi
Navbar, atau yang sering disebut sebagai navigasi, adalah salah satu elemen kunci dalam desain web yang membantu pengguna untuk menavigasi situs dengan mudah. Bootstrap 5 menyediakan seperangkat alat yang powerful dan mudah digunakan untuk membuat navbar yang responsif dan menarik. Dalam artikel ini, kita akan membahas cara membuat navbar menggunakan Bootstrap 5, serta memberikan contoh skrip secara detail.
Mengenal Bootstrap 5 Navbar
Navbar di Bootstrap 5 sangat fleksibel dan dapat disesuaikan sesuai kebutuhan Anda. Dengan Bootstrap 5, Anda dapat membuat navbar yang responsif dan berfungsi dengan baik pada berbagai perangkat, mulai dari desktop hingga perangkat mobile.
Langkah-langkah Membuat Navbar dengan Bootstrap 5
1. Menyiapkan Struktur Dasar HTML
Pertama, kita perlu menyiapkan struktur dasar HTML untuk navbar kita. Buatlah sebuah tag <nav>
dengan kelas navbar
dan tambahkan kelas navbar-expand-lg
untuk membuat navbar responsif pada perangkat mobile.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</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">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
2. Menambahkan CSS Bootstrap 5
Tambahkan link CSS Bootstrap 5 ke dalam bagian <head>
dari dokumen HTML Anda.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
3. Menambahkan JavaScript Bootstrap 5 (opsional)
Jika Anda ingin menggunakan fitur toggler untuk navbar responsif, Anda perlu menambahkan JavaScript Bootstrap 5. Letakkan sebelum tag penutup </body>
.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
Contoh Skrip Lengkap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Navbar</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</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">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat navbar yang responsif dan menarik menggunakan Bootstrap 5 dengan mudah. Selamat Mencoba!
Originally posted 2024-02-08 21:07:53.