FluentStack

Membuat Navbar dengan Flexbox

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner45 menitBahasa Indonesia

Membuat Navbar dengan Flexbox

Gunakan Flexbox untuk membuat navbar sederhana yang rapi dan mudah dibaca.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menggunakan Flexbox untuk layout navbar
  • Mengatur jarak antar link
  • Menggunakan justify-content untuk memisahkan brand dan menu
  • Menggunakan align-items untuk merapikan posisi vertikal
  • Membuat navbar sederhana tanpa JavaScript
CSSFlexboxNavbar

Isi lesson

7 blok
  1. 1.
    Navbar biasanya layout satu barisBelum selesaiWajib
  2. 2.
    HTML navbar sederhanaBelum selesaiWajib
  3. 3.
    CSS navbar dengan FlexboxBelum selesaiWajib
  4. 4.
    Gunakan nav untuk navigasiBelum selesaiOpsional
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

Navbar biasanya layout satu baris

Wajib

Navbar sering punya brand di kiri dan menu di kanan. Flexbox cocok untuk kasus ini karena navbar biasanya menyusun item dalam satu baris.

justify-content: space-between bisa memisahkan dua area. align-items membantu merapikan posisi vertikal. gap membantu memberi jarak antar link tanpa margin acak.

Bagian ini memengaruhi progres lesson.

HTML navbar sederhana

Wajib
html
<nav class="nav">
  <a class="brand" href="#">FluentStack</a>
  <div class="nav-list">
    <a href="#">Home</a>
    <a href="#">Roadmap</a>
    <a href="#">Login</a>
  </div>
</nav>

Elemen nav memberi makna navigasi. .nav-list membungkus link menu agar jaraknya bisa diatur bersama.

Bagian ini memengaruhi progres lesson.

CSS navbar dengan Flexbox

Wajib
css
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.nav-list {
  display: flex;
  gap: 12px;
}

Flexbox dipakai di .nav untuk memisahkan brand dan menu. Flexbox juga dipakai di .nav-list untuk menyusun link menu.

Bagian ini memengaruhi progres lesson.

Tips

Opsional

Gunakan nav untuk navigasi

Gunakan elemen nav untuk area navigasi utama. Jangan membuat semua navbar hanya dengan div jika sebenarnya bagian itu adalah navigasi.

Opsional, tidak menghambat penyelesaian lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kalau brand ingin di kiri dan menu ingin di kanan, property Flexbox mana yang paling sesuai?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat navbar sederhana

Latihan membuat navbar sederhana dengan Flexbox tanpa JavaScript.

Tujuan awal: Targetkan .nav.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

9 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Flexbox cocok untuk navbar satu baris.
  • justify-content membantu mengatur posisi horizontal.
  • align-items membantu merapikan posisi vertikal.
  • gap lebih rapi daripada memberi margin acak pada setiap link.
  • Berikutnya kamu akan melihat layout dua arah dengan CSS Grid.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Navbar biasanya layout satu baris.

Memuat progresReview module