Tujuan Pembelajaran

Setelah mempelajari bab ini peserta mampu:

1. Memahami fungsi Navbar.
2. Membuat menu navigasi website.
3. Membuat Navbar responsif.
4. Membuat menu mobile otomatis.

---

A. Apa Itu Navbar?

Navbar (Navigation Bar) adalah komponen yang digunakan untuk menampilkan menu navigasi website.

Contoh menu website:

Beranda | Profil | Jurusan | Galeri | Kontak

Navbar biasanya ditempatkan di bagian atas website.

---

B. Struktur Dasar Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">

<a class="navbar-brand" href="#">
SMK Negeri 1
</a>

</div>

</nav>

Penjelasan:

Class	Fungsi
navbar	Mengaktifkan Navbar Bootstrap
navbar-expand-lg	Navbar akan collapse pada layar kecil
navbar-dark	Warna teks terang
bg-primary	Background biru

---

Praktik 1

Membuat Navbar Sederhana

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">

<a class="navbar-brand" href="#">

SMK Hebat Indonesia

</a>

</div>

</nav>

---

C. Menambahkan Menu

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

<div class="container">

<a class="navbar-brand" href="#">
SMK Hebat
</a>

<ul class="navbar-nav">

<li class="nav-item">
<a class="nav-link" href="#">
Beranda
</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">
Profil
</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">
Kontak
</a>
</li>

</ul>

</div>

</nav>

---

D. Navbar Responsif

Bootstrap menyediakan tombol hamburger otomatis.

<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#menu">

<span class="navbar-toggler-icon"></span>

</button>

---

Praktik 2

Navbar Lengkap Responsif

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<div class="container">

<a class="navbar-brand" href="#">

Sistem Akademik

</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="#">
Beranda
</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">
Data Siswa
</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">
Guru
</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">
Logout
</a>
</li>

</ul>

</div>

</div>

</nav>

---

Latihan Bab

1. Apa fungsi Navbar?
2. Apa fungsi navbar-expand-lg?
3. Apa fungsi navbar-brand?
4. Apa fungsi navbar-toggler?
5. Mengapa Navbar perlu responsif?

---

Tugas Praktik Bab

Buat Navbar sekolah yang berisi:

• Beranda
• Profil
• Jurusan
• Prestasi
• Galeri
• Kontak