Responsive Navigation

Navbar yang nyaman di desktop adalah kasus uji responsif pertama yang hampir selalu gagal: lima tautan plus tombol keranjang tidak muat dalam kolom 360px, dan memaksa mereka berdesakan hanya menghasilkan teks terpotong. Chapter ini membahas pola navigasi lintas ukuran layar, dua teknik CSS murni yang menyelesaikan sebagian besar kasus, dan diskusi jujur tentang tombol hamburger — pola yang tampak sederhana tetapi menyimpan keputusan aksesibilitas penting.

Dua Pola Dasar #

Keduanya memakai mesin flexbox dari section Flexbox — navbar desktop-nya sudah kita rakit di chapter Pola Layout: Navigation; tugas sekarang membuat navbar itu tetap utuh saat ruangnya dipangkas:

Pola 1: Menu yang Wrap Tanpa Media Query #

.nav-bar {
  display: flex;
  flex-wrap: wrap;      /* item yang tak muat pindah ke baris baru */
  align-items: center;
  gap: 10px 22px;
}
.nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

Tidak ada satu media query pun — flex-wrap menangani perpindahan sendiri, dan nilai pertama gap menjaga jarak antarbaris tetap lega. Pola ini paling pas untuk 3-5 tautan pendek.

Pola 2: Bertumpuk di Ponsel, Menyamping di Desktop #

.menu-ponsel {
  display: flex;
  flex-direction: column;   /* dasar ponsel: daftar vertikal */
  gap: 2px;
}
.menu-ponsel a {
  display: block;
  padding: 10px 12px;       /* area sentuh yang layak, bukan sekadar jarak */
  text-decoration: none;
  color: #1f2933;
}
@media (min-width: 640px) {
  .menu-ponsel {
    flex-direction: row;
    gap: 4px;
  }
  .menu-ponsel a {
    padding: 8px 12px;
  }
}

Dasarnya mengikuti strategi mobile first dari chapter sebelumnya: daftar vertikal yang nyaman disentuh, lalu media query min-width menata tautan menyamping saat ruang tersedia. Perhatikan padding pada tautan — sesuai pengingat chapter Gap, jarak antartautan bukan pengganti target sentuh. Jangan lupa pula gaya :focus-visible agar pengguna keyboard selalu melihat tautan mana yang sedang aktif.

Demo berikut menata kedua pola berdampingan dengan satu brand yang sama:

Pada ponsel sungguhan, Pola B adalah wajah menu setelah tombol hamburger dibuka.

Tombol Hamburger: Diskusi yang Jujur #

Ketika daftar tautan terlalu panjang untuk ditampilkan terbuka, muncul kebutuhan klasik: tombol tiga garis — hamburger — yang membuka dan menutup menu. Ikonnya bisa dibuat murni CSS, tetapi membuka-menutup membutuhkan mekanisme toggle. Versi CSS murni yang terkenal adalah checkbox hack:

.tombol-menu-checkbox {
  display: none;               /* checkbox disembunyikan total */
}
.tombol-menu-checkbox:checked ~ .menu-daftar {
  display: block;              /* menu terbuka saat checkbox tercentang */
}

Mekanismenya: markup memuat <input type="checkbox"> diikuti menu sebagai saudaranya, dan <label for="..."> berperan sebagai tombol. Mengklik label mencentang checkbox; selector :checked lalu membuka menu. Cerdas — tetapi mari kita jujur menilai konsekuensinya:

• Checkbox dengan display: none tidak bisa menerima fokus — pengguna keyboard tidak punya cara membuka menu.
• State terbuka atau tertutup tidak diumumkan ke screen reader; tidak ada aria-expanded yang ikut berubah.
• Menutup dengan tombol Escape membutuhkan JavaScript — CSS murni tidak memiliki cara mendengarkan tombol keyboard.

Tabel berikut merangkum pilihan yang ada:

Rekomendasi jujur kita: kenali checkbox hack karena ia melatih cara CSS merepresentasikan state, tetapi untuk menu produksi, gunakan <button aria-expanded> plus beberapa baris JavaScript. Biayanya kecil, dan menu yang bisa dibuka semua orang — termasuk pengguna keyboard dan screen reader — adalah bagian dari definisi layout responsif yang baik.

Ringkasan #

Dua teknik CSS murni — wrap dan pembalikan flex-direction — menyelesaikan sebagian besar kebutuhan navigasi lintas ukuran, sementara hamburger menuntut keputusan sadar soal aksesibilitas: CSS murni bisa dilakukan, JavaScript kecil lebih bertanggung jawab. Navigasi hanyalah satu contoh penerapan; chapter berikutnya menggeneralisasi teknik flexbox responsif menjadi pola yang bisa dipakai di seluruh halaman.