Navigasi yang baik tidak terasa sebagai “fitur” — pengunjung mencari sesuatu, menemukannya, dan bergerak tanpa sadar bahwa ada rancangan di belakangnya. Navigasi yang buruk bekerja sebaliknya: label yang harus ditebak, menu yang berpindah posisi antarhalaman, sub-menu tersembunyi lima tingkat. Chapter penutup ini merangkum prinsip penyusunan navigasi — dari urutan item sampai kebiasaan keyboard — lalu menujukannya menjadi daftar periksa yang bisa dipakai pada proyek apa pun.

Tiga Prinsip Penyusunan #

Prinsip pertama, urutan logis: susun item mengikuti alur pengunjung, bukan urutan pembuatan halaman. Situs kedai memula dengan beranda, menu produk, tentang, lalu kontak — dari yang paling dicari ke yang paling jarang. Prinsip kedua, label pendek dan jelas: satu sampai dua kata yang memakai kosakata pengunjung — “Menu”, bukan “Daftar Produk Unggulan Kami”. Prinsip ketiga, konsisten: label dan posisi item sama di semua halaman, seperti dilatih di chapter Navigasi Antarhalaman.

Situs yang membesar membutuhkan sub-menu. HTML menyusunnya dengan ul bersarang — daftar kedua diletakkan di dalam li induknya:

html 
<nav aria-label="Menu utama">
  <ul>
    <li>
      <a href="menu.html">Menu</a>
      <ul>
        <li><a href="menu-kopi.html">Kopi</a></li>
        <li><a href="menu-teh.html">Teh</a></li>
        <li><a href="menu-camilan.html">Camilan</a></li>
      </ul>
    </li>
    <li><a href="tentang.html">Tentang</a></li>
    <li><a href="kontak.html">Kontak</a></li>
  </ul>
</nav>

Hasil Render: enam link tampil sebagai daftar bertitik dua tingkat — sub-daftar menempatkan diri di dalam item “Menu”. Mari kita telaah:

  1. ul kedua di dalam li pertama: sub-menu diletakkan setelah link induknya, di dalam li yang sama — bukan di luar — agar terikat secara struktur.
  2. aria-label="Menu utama" pada nav: membedakan navigasi ini dari nav lain yang mungkin ada di halaman yang sama.
  3. Batas dua tingkat: struktur bersarang boleh diteruskan lebih dalam, tetapi navigasi lebih dari dua tingkat cenderung membingungkan — lebih baik diratakan atau dipecah ke halaman perantara.

Untuk sub-menu yang bisa dilipat pengunjung, elemen details menyediakan perilaku buka-tutup tanpa JavaScript; pembahasannya menunggu Section Interactive Elements. Menu lipat penuh — tombol “hamburger” pada layar ponsel — adalah urusan CSS dan JavaScript di luar materi HTML murni; tugas kita di HTML adalah memastikan strukturnya (nav + ul + a) sudah benar sebelum lapisan itu ditempelkan.

Ramah Keyboard dan Fokus Terlihat #

Sebagian pengunjung tidak memakai tetikus: mereka menekan Tab untuk berpindah antarlink dan Enter untuk mengaktifkannya. Dua kebiasaan menjaga navigasi tetap ramah bagi mereka. Pertama, urutan penekanan Tab mengikuti urutan kode sumber — letakkan nav pada posisi yang mencerminkan prioritasnya, biasanya di awal body. Kedua, biarkan penanda fokus bawaan browser tetap terlihat: garis tepi yang muncul di sekitar link saat ditekan Tab itu memang dimaksudkan jangan sampai dihapus lewat CSS, sebab bagi pengunjung keyboard itulah satu-satunya petunjuk posisi mereka.

Daftar Periksa Navigasi #

Sebelum menyebut navigasi selesai, periksa delapan butir berikut:

  • Urutan item mengikuti alur pengunjung; item terpenting berada di awal.
  • Label pendek, satu sampai dua kata, memakai kosakata pengunjung.
  • Struktur, label, dan posisi menu sama persis di semua halaman.
  • Halaman aktif ditandai aria-current="page" atau class penanda.
  • Sub-menu maksimal dua tingkat, dibungkus ul di dalam li induknya.
  • Setiap link bisa dicapai dengan Tab dan diaktifkan dengan Enter.
  • Penanda fokus keyboard terlihat jelas dan tidak dihapus CSS.
  • Link tampak seperti link — warna atau garis bawah pembeda tetap dipertahankan.

Ringkasan #

  • Urutkan item sesuai alur pengunjung, labeli dengan kata yang mereka pakai, jaga konsistensi antarhalaman.
  • Sub-menu disusun ul bersarang dalam li induk, maksimal dua tingkat.
  • Navigasi harus bisa dilalui penuh dengan keyboard dan penanda fokusnya terlihat.
  • Delapan butir daftar periksa di atas menjadi tolok ukur akhir setiap navigasi.

Navigasi yang tertata menutup perjalanan kita bersama link. Materi berikutnya berpindah ke penyusun halaman yang juga berbentuk deret: daftar — ul, ol, dan kawan-kawannya — di Section Lists.