Pola Layout: Navigation

Teori flexbox sudah lengkap di tangan kita: container dan item, dua sumbu, grow/shrink, basis, margin auto, hingga nesting. Dua chapter terakhir sebelum penutup section ini mengubah teori tersebut menjadi komponen yang benar-benar kita rakit. Yang pertama adalah pola yang tampil di hampir setiap halaman web: navigasi. Kita akan membangun navbar lengkap dengan brand di kiri, menu berisi tautan, tombol keranjang di ujung kanan, plus state hover dan fokus yang layak dipakai di produksi.

Anatomi Navigasi #

Navbar yang baik terurai menjadi tiga bagian dengan peran flexbox yang berbeda:

Perhatikan bagian menu: <ul> adalah seorang item flex bagi navbar, tetapi sekaligus flex container bagi <li> di dalamnya — pola nested dari chapter sebelumnya. Menu center/right dapat dipilih lewat satu deklarasi margin (margin-right: auto pada brand mendorong menu ke kanan; margin: 0 auto pada menu menengahkannya).

Menulis Markup dan Gaya #

Kita mulai dari markup. Struktur HTML-nya semantik: <nav> membungkus semuanya, menu tetap berupa daftar:

<nav class="nav-utama">
  <a class="nav-brand" href="#">Kedai Senja</a>
  <ul class="nav-menu">
    <li><a class="nav-tautan" href="#">Menu</a></li>
    <li><a class="nav-tautan" href="#">Cerita</a></li>
    <li><a class="nav-tautan" href="#">Kontak</a></li>
  </ul>
  <button class="nav-keranjang" type="button">Keranjang (2)</button>
</nav>

Lalu gayanya. Blok ini memadukan hampir seluruh section Flexbox:

.nav-utama {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  background-color: #14503a;
}

.nav-brand {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.nav-menu {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-tautan {
  display: block;
  color: #d1e7dd;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
}

.nav-keranjang {
  margin-left: auto;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  background-color: #f4fbf7;
  color: #14503a;
}

Mari kita telaah keputusan pentingnya:

1. .nav-utama dengan align-items: center: brand, menu, dan tombol punya tinggi berbeda; perataan cross axis membuat semuanya sejajar di tengah navbar.
2. gap: 24px: jarak antar bagian besar (brand–menu–keranjang) diatur di tingkat navbar.
3. .nav-menu dengan reset margin dan padding: browser memberi <ul> margin dan padding-left bawaan; tanpa reset, menu tidak sejajar dengan brand — materi yang kita bahas pada chapter Styling Lists.
4. .nav-tautan dengan display: block dan padding: area klik setiap tautan melebar melebihi teksnya, sehingga target sentuhan di layar ponsel lebih nyaman.
5. .nav-keranjang dengan margin-left: auto: seluruh ruang sisa diserap sisi kiri tombol — tombol keranjang menempel di ujung kanan apa pun lebar layarnya.

Demo berikut merakit seluruh potongan di atas. Arahkan kursor ke tautan untuk state hover, atau tekan tombol Tab pada keyboard untuk melihat ring fokus berpindah:

State Hover dan Fokus #

Tautan navigasi harus terlihat hidup saat disentuh dan terlacak saat dinavigasi lewat keyboard. Dua state berikut melengkapinya:

.nav-tautan:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.nav-tautan:focus-visible {
  outline: 2px solid #f4fbf7;
  outline-offset: 2px;
}

Kita memakai :focus-visible yang hanya menampilkan ring bagi pengguna keyboard tanpa mengganggu klik tetikus; untuk browser lama, :focus dapat dipasangkan sebagai fallback.

Menyiapkan Diri untuk Layar Sempit #

Navbar kita masih mendatar apa pun lebarnya; di layar ponsel, menu bisa menyempit tidak karuan. Dua alat flexbox menyiapkan jalannya: flex-wrap: wrap membiarkan tautan melipat ke baris kedua alih-alih meluber, dan property order dapat mengatur ulang posisi visual item tanpa menyentuh markup — berguna saat brand harus turun ke baris kedua di layar sempit. Pembahasan lengkapnya menanti pada section Responsive Web Design; untuk sekarang cukup kita tahu jalannya sudah tersedia.

Kesalahan Umum #

Ringkasan #

Navbar kita terbentuk dari tiga lapis flexbox: navbar sebagai container baris, menu sebagai nested container bagi tautannya, dan margin auto yang menempelkan keranjang ke ujung — ditutup state hover dan fokus yang menghormati pengguna keyboard. Pola ini bisa langsung dipakai di proyek mana pun dengan penyesuaian warna. Selanjutnya kita merakit pola komponen kedua yang sama pentingnya: deretan kartu produk yang sama tinggi dengan tombol aksi yang sejajar rapi di dasarnya.