Tag nav HTML: Navbar, Menu dan Breadcrumb

Navbar dengan nav

Bungkus menumu dengan <nav> dan letakkan link-linknya di dalam sebuah list. Flexbox mengubah list itu menjadi bar horizontal:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    nav { background: #111827; }
    nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px; }
    nav a {
      display: block; padding: 8px 14px; border-radius: 6px;
      color: #e5e7eb; text-decoration: none;
    }
    nav a:hover { background: #374151; color: #fff; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

list-style: none dan padding: 0 menghapus bullet dan indentasi. display: block pada setiap link membuat padding-nya benar-benar memakan ruang di bar, sehingga seluruh kotak berpadding itu bisa diklik. Hapus baris display: flex dan menu yang sama berubah menjadi list vertikal, yang merupakan tampilan menu sidebar.

<nav> sendiri tidak terlihat seperti apa pun. Tugasnya adalah makna: screen reader menampilkannya sebagai landmark navigasi, sehingga pengguna bisa melompat ke menu, atau melewatinya, dengan satu tombol.

Tandai halaman yang sedang dibuka

Tambahkan aria-current="page" ke link halaman yang sedang ditampilkan. Atribut ini memberi tahu screen reader "kamu ada di sini", dan memberi CSS pegangan untuk menyorot link itu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Current page</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; border-bottom: 2px solid #e5e7eb; }
    nav a { display: block; padding: 10px 0; color: #374151; text-decoration: none; }
    nav a[aria-current="page"] {
      color: #2563eb; font-weight: 600;
      box-shadow: inset 0 -3px 0 #2563eb;
    }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#" aria-current="page">Lessons</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
</body>
</html>

Pindahkan aria-current="page" ke link lain dan sorotannya ikut pindah. Mengatur gaya lewat atribut, bukan lewat class .active, menjaga tampilan dan aksesibilitas tetap sejalan: kamu tidak bisa punya salah satunya tanpa yang lain.

Beberapa nav di satu halaman: label dan breadcrumb

Satu halaman bisa punya menu utama, breadcrumb dan daftar isi, masing-masing di dalam <nav>-nya sendiri. Beri masing-masing sebuah aria-label, supaya screen reader mengumumkan "Breadcrumb navigation", bukan tiga entri "navigation" yang sama persis:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Breadcrumb</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
    .crumbs li + li::before { content: "/"; margin: 0 8px; color: #9ca3af; }
    .crumbs a { color: #2563eb; }
  </style>
</head>
<body>
  <nav class="crumbs" aria-label="Breadcrumb">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">HTML</a></li>
      <li><span aria-current="page">nav</span></li>
    </ol>
  </nav>
  <h1>HTML nav</h1>
</body>
</html>

Breadcrumb memakai ordered list <ol> karena urutannya penting. Garis miringnya berasal dari CSS ::before, jadi screen reader tidak membaca "slash" di antara setiap item. Item terakhir adalah halaman saat ini dan bukan sebuah link.

Daftar isi

List berisi link ke bagian-bagian di halaman yang sama juga termasuk navigasi. Link #id melompat ke elemen dengan id tersebut; coba di preview:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table of contents</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    nav { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; }
    nav h2 { font-size: 14px; margin: 4px 0; }
    section { min-height: 200px; border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-labelledby="toc-title">
    <h2 id="toc-title">On this page</h2>
    <ol>
      <li><a href="#install">Install</a></li>
      <li><a href="#configure">Configure</a></li>
      <li><a href="#deploy">Deploy</a></li>
    </ol>
  </nav>
  <section id="install"><h2>Install</h2></section>
  <section id="configure"><h2>Configure</h2></section>
  <section id="deploy"><h2>Deploy</h2></section>
</body>
</html>

Di sini labelnya berasal dari heading yang terlihat lewat aria-labelledby. Cara ini lebih baik daripada aria-label kalau heading-nya sudah tampil di layar.

Tombol menu mobile

Di layar sempit, menu biasanya disembunyikan di balik sebuah tombol. Pakai <button> sungguhan dengan aria-expanded, dan tetap letakkan link-linknya di dalam <nav>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; border: 1px solid #111827; border-radius: 6px; background: #fff; cursor: pointer; }
    #menu { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid #e5e7eb; border-radius: 8px; }
    #menu a { display: block; padding: 10px 14px; color: #111827; text-decoration: none; }
    #menu li + li { border-top: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <button aria-expanded="false" aria-controls="menu" id="toggle">Menu</button>
    <ul id="menu" hidden>
      <li><a href="#">Home</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <script>
    const toggle = document.getElementById('toggle');
    const menu = document.getElementById('menu');
    toggle.addEventListener('click', () => {
      const open = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!open));
      menu.hidden = open;
    });
  </script>
</body>
</html>

aria-expanded memberi tahu screen reader apakah menu sedang terbuka, dan atribut hidden menghapus list dari layar sekaligus dari accessibility tree selama menu tertutup. Di layar lebar, kamu akan menampilkan list itu dengan media query dan menyembunyikan tombolnya.

Kesalahan umum

• Membungkus setiap kumpulan link dengan <nav>. Pakai untuk menu utama, breadcrumb, pagination dan daftar isi. Link di tengah teks bukan blok navigasi.
• Tombol menu yang dibuat dari <div>. Elemen itu tidak bisa difokuskan atau ditekan dengan keyboard. Pakai <button>.
• Beberapa nav tanpa label. Tambahkan aria-label atau aria-labelledby ke masing-masing supaya bisa dibedakan.
• Hanya mewarnai link halaman saat ini. Tambahkan aria-current="page"; warna saja tidak diumumkan dan mungkin tidak terlihat oleh semua orang.
• Link dengan href="#" di situs produksi. Untuk demo tidak masalah, tapi item menu sungguhan butuh URL sungguhan supaya tetap berfungsi saat dibuka di tab baru. Halaman link membahas cara kerja nilai href.