htmlcssnavbarlayoutPemula9 mnt baca

Membangun Navbar Sederhana

Navbar horizontal dengan logo dan menu: fondasi navigasi yang dipakai hampir semua website.

Apa Itu Navbar?

Navbar adalah bar navigasi di bagian atas halaman. Fungsinya seperti papan petunjuk di mal: memberi tahu pengunjung mereka ada di mana dan ke mana bisa pergi. Hampir semua website memilikinya, jadi ini komponen wajib pertama yang kamu kuasai.

Langkah Membangun

HTML: Gunakan tag semantik <nav>. Di dalamnya ada logo (bisa teks biasa) dan daftar menu memakai <ul> berisi <li><a>. Tag semantik membantu SEO dan screen reader.

CSS: Trik utamanya adalah display: flex dengan justify-content: space-between. Ini mendorong logo ke kiri dan menu ke kanan secara otomatis. Hapus bullet list dengan list-style: none dan atur jarak antar menu dengan gap.

JS: Untuk modul ini JS-nya kecil: tandai menu yang sedang aktif. Saat link diklik, hapus class active dari semua link lalu tambahkan ke yang diklik.

Kenapa Flexbox?

Tanpa flexbox kamu harus memakai float atau margin manual yang rapuh. Flexbox dibuat khusus untuk barisan satu dimensi seperti navbar, jadi dua baris CSS menyelesaikan 90 persen pekerjaan.

Catatan teknis: Beri position: sticky; top: 0 pada nav agar navbar menempel saat halaman di-scroll. Ini satu baris yang membuat websitemu terasa profesional.

Kesalahan Umum

  • Lupa menghapus list-style sehingga bullet ikut tampil.
  • Link menu memakai href="#" lalu halaman meloncat ke atas (wajar untuk latihan, nanti diganti URL asli).
  • Navbar tidak full-width karena body punya margin bawaan browser (atasi dengan body { margin: 0 }).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Tambah Tombol CTA

Tambahkan tombol "Mulai Belajar" di ujung kanan navbar (setelah menu) dengan gaya berbeda: background gradien ungu ke pink dan teks putih tebal. Saat diklik, tampilkan alert "Selamat belajar!".