Navigasi — Membantu User Menemukan Jalan

Navigasi yang baik membuat user bisa menemukan apa yang mereka cari tanpa berpikir keras. Navigasi yang buruk membuat user frustasi dan meninggalkan website.

Pola Navigasi Umum

1. Horizontal Navbar (paling umum untuk website)

<nav aria-label="Main navigation">
  <a href="/" aria-current="page">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
</nav>

2. Sidebar (dashboard, admin panel)

• Cocok untuk app dengan banyak halaman
• Bisa collapsible untuk hemat ruang

3. Tabs (konten dalam satu halaman)

• Baik untuk switching antara kategori
• Gunakan role="tablist", role="tab", role="tabpanel"

4. Breadcrumbs (navigasi hierarki)

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li aria-current="page">Detail</li>
  </ol>
</nav>

Active State

User harus selalu tahu di mana mereka berada:

.nav-link[aria-current="page"] {
  color: #2563EB;
  font-weight: 600;
  border-bottom: 2px solid #2563EB;
}

Accessibility Navigasi

1. <nav> element — gunakan untuk area navigasi utama
2. aria-label — beri label jika ada lebih dari satu <nav> di halaman
3. aria-current="page" — tandai link halaman aktif
4. Keyboard navigable — semua link harus bisa diakses dengan Tab

Perhatikan Stripe — navbar mereka clean, dengan hover dropdowns yang muncul dengan smooth. Active page ditandai dengan jelas.