cssflexboxnavbarstudi-kasusMenengah5 mnt baca

Studi Kasus: Navbar

Membangun navbar responsif dengan flexbox: logo kiri, menu tengah, tombol kanan.

Struktur HTML navbar

html
<nav class="navbar">
  <a class="logo" href="#">Brand</a>
  <div class="menu">
    <a href="#">Beranda</a>
    <a href="#">Produk</a>
    <a href="#">Tentang</a>
  </div>
  <a class="cta" href="#">Mulai</a>
</nav>

Trik margin auto di flexbox

css
.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu {
  display: flex;
  gap: 4px;
  margin: 0 auto; /* dorong ke tengah! */
}

margin: auto di dalam flex container menyerap semua ruang sisa ke arah itu. margin: 0 auto pada menu mendorongnya tepat ke tengah, mengapit logo dan tombol CTA. Ini trik elegan yang tidak ada di layout lain.

Alternatif: justify-content: space-between dengan tiga grup, tapi menu tidak akan tepat di tengah kalau lebar logo dan CTA beda.

Sentuhan akhir

css
.navbar {
  padding: 12px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
}

.menu a {
  padding: 8px 14px;
  border-radius: 8px;
  color: #475569;
  text-decoration: none;
}

.menu a:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.cta {
  background: #38bdf8;
  color: white;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

Catatan teknis: untuk mobile, pola umumnya: sembunyikan .menu di layar kecil dan tampilkan tombol hamburger (butuh sedikit JavaScript atau checkbox hack). Fondasi flexbox-nya tetap sama.

Kenapa navbar memakai flexbox, bukan float?

Navbar adalah kasus satu dimensi sempurna: item berderet horizontal dengan alignment vertikal tengah. Float butuh clearfix dan tidak bisa centering vertikal mudah. Flexbox menyelesaikan dalam 3 baris.

Contoh: navbar dengan menu tengah PRESISI

Trik margin auto vs space-between:

css
/* margin auto: menu TEPAT di tengah viewport */
.navbar {
  display: flex;
  align-items: center;
}
.menu {
  margin: 0 auto;
}

/* space-between: menu di tengah SISA ruang (tidak tepat tengah bila logo/CTA beda lebar) */
.navbar2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Pilih margin auto bila butuh presisi tengah; space-between bila cukup "kira-kira di tengah".

Contoh: navbar mobile sederhana

css
@media (max-width: 640px) {
  .navbar {
    flex-wrap: wrap;
  }
  .menu {
    order: 3;
    width: 100%;
    margin: 8px 0 0;
    justify-content: space-around;
  }
}

Menu turun ke baris sendiri di HP tanpa JavaScript.

Jebakan

Lupa flex-shrink pada logo. Logo dengan teks panjang bisa menyusut gepeng di HP. Beri flex-shrink: 0 pada logo.

CTA terdorong keluar layar. Terlalu banyak item + gap besar = overflow horizontal. Di HP, sederhanakan menu atau izinkan wrap.

Tips profesional

  • Navbar + position: sticky; top: 0; + backdrop-filter: blur(12px) = navbar kaca modern dalam 5 baris.
  • Beri z-index pada navbar sticky (misal 20) agar dropdown/hero tidak menutupinya saat scroll.
  • Untuk menu yang sangat panjang di HP, pola yang benar adalah hamburger + drawer (butuh sedikit JavaScript), bukan memampatkan semua link.

Rangkuman

Navbar = flex + align-items center + trik margin auto untuk centering. Kuasai pola ini karena dipakai di hampir setiap website.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Navbar Rata Kanan

Di playground:

  1. Ubah navbar menjadi varian "logo kiri, semua menu kanan": pindahkan .menu dan .cta ke kanan memakai satu properti margin pada elemen yang tepat.
  2. Tambahkan efek: link menu aktif (class aktif di HTML) punya background biru muda dan teks biru tua.
  3. Di komentar, jelaskan kenapa margin-left: auto pada .menu mendorongnya ke kanan.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>
Open on CodeSandboxOpen Sandbox