Navigasi adalah komponen yang paling terlihat berubah antar ukuran layar: di desktop, sekumpulan tautan berjajar rapi dalam satu baris; di ponsel dengan lebar 360px, tautan yang sama harus dilipat atau digulir. Karena itu hampir setiap proyek responsif membutuhkan minimal satu pola navigasi ganda. Chapter ini membangun dua pola — menu lipat tanpa JavaScript dan scroll horizontal — lalu menimbang trade-off masing-masing beserta catatan aksesibilitasnya.

Pola Menu Lipat dengan Checkbox Hack #

Checkbox hack memanfaatkan satu elemen <input type="checkbox"> tersembunyi: ketika label diklik, checkbox berubah state, dan selector :checked membuka menu. Seluruh mekanisme berjalan di CSS, tanpa satu baris JavaScript pun:

html index.html 
<nav class="nav">
  <input type="checkbox" id="toggle-menu" class="toggle-menu">
  <label for="toggle-menu" class="tombol-menu">&#9776; Menu</label>
  <ul class="menu">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Artikel</a></li>
  </ul>
</nav>
css 
.menu { display: none; flex-direction: column; }
.toggle-menu:checked ~ .menu { display: flex; }

@media (min-width: 768px) {
  .tombol-menu { display: none; }
  .menu { display: flex; flex-direction: row; }
}

Mari kita telaah potongan di atas:

  1. .toggle-menu: checkbox disembunyikan dengan ukuran 1x1px dan opacity: 0 — bukan display: none, agar tetap dapat menerima fokus keyboard.
  2. .toggle-menu:checked ~ .menu: combinator ~ menunjuk .menu sebagai sibling setelah checkbox; bila checkbox tercentang, menu tampil sebagai kolom.
  3. Blok @media (min-width: 768px): di layar lebar tombol bersembunyi dan menu tampil permanen dalam satu baris — gaya desktop tidak membutuhkan interaksi apa pun.

Mekanisme ini berdiri di atas satu hubungan HTML yang klasik: atribut for pada label menunjuk id checkbox, sehingga klik pada label diteruskan browser ke checkbox — persis seperti mengeklik kotaknya langsung. Selector :checked kemudian menerjemahkan state itu menjadi tampilan menu. Satu-satunya syarat struktural adalah urutan penulisan di HTML: input, label, lalu menu, agar combinator sibling ~ tetap menjangkau elemen yang mengikuti checkbox.

Memilih di antara kedua pola didorong oleh isi menunya. Tautan utama yang sedikit — tiga hingga lima — biasanya tidak perlu dilipat sama sekali; tampilkan berjajar dengan label pendek. Menu yang bertumpuk menjadi puluhan tautan layak dilipat, sementara daftar kategori yang datar paling nyaman dengan gulir horizontal pada bagian berikutnya.

Alternatif Ringan: Scroll Horizontal #

Bila tautannya berjumlah sedang dan setipe — daftar kategori, tab filter — melipat menu bisa jadi berlebihan. Pola kedua menempatkan semua tautan dalam satu baris yang dapat digulir:

css 
.menu-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.chip { white-space: nowrap; }

overflow-x: auto menyembunyikan kelebihan lebar ke dalam guliran horizontal, dan white-space: nowrap menjaga tiap chip tetap satu baris tanpa patah kata. Pola ini bekerja pada semua lebar tanpa satu pun media query, dan pengguna tetap menjangkau seluruh tautan dengan usapan. Trade-off-nya: tautan di luar layar tidak terlihat, sehingga pola ini paling cocok untuk daftar yang urutannya tidak kritis.

Untuk navbar yang perlu menempel di atas saat halaman digulir, pasangkan pola mana pun dengan position: sticky pada elemen nav. Penempelan ini bekerja independen dari media query — beri top: 0 dan biarkan baris tetap terlihat di semua ukuran tanpa versi khusus per breakpoint.

Catatan Aksesibilitas Singkat #

Tiga kebiasaan yang melengkapi kedua pola: sediakan area sentuh minimal sekitar 44x44px pada tautan (padding membantu); jangan mengandalkan :hover untuk membuka submenu karena sentuhan tidak punya hover yang konsisten — gunakan klik dan :focus-visible untuk indikator keyboard; dan bila menu dikendalikan tombol, pantulkan keadaannya lewat aria-expanded="true|false" agar pembaca layar tahu menu sedang terbuka.

Bila menunya panjang, tambahkan tautan lompat (skip link) di awal <body> menuju konten utama: tautan kecil yang bersembunyi di luar layar dan baru muncul saat menerima fokus, sehingga pengguna keyboard tidak perlu menelusuri seluruh menu pada setiap halaman.

Hasil di Browser:

text 
Viewport harness 1280x720 (desktop):
- ul.menu     -> display flex, flex-direction row (menu berbaris)
- label Menu  -> display none (tombol lipat bersembunyi di desktop)
- tautan aktif -> background rgb(30, 58, 138), padding-left 14px
- .menu-scroll -> display flex, overflow-x auto (siap digulir bila perlu)
Di viewport di bawah 768px, label "Menu" kembali tampil dan ul.menu
menunggu checkbox tercentang sebelum muncul sebagai kolom.

Dengan navigasi yang beres, bagian besar sebuah halaman responsif telah tercakup — chapter berikutnya menyatukan semuanya menjadi layout halaman utuh.