Çalıştırılabilir HTML Dokümanları: HTML nav

Q: nav içindeki linkler bir listede mi olmalı?

Yaygın ve iyi bir kalıptır: öğelerinden oluşan bir , ekran okuyucuların menüde kaç link olduğunu duyurmasını sağlar. Doğrudan içindeki düz linkler de geçerlidir, örneğin yan yana iki ya da üç link için.

Q: Her link grubu için bir nav elementi gerekir mi?

Hayır. elementini yalnızca başlıca gezinme blokları için kullan. Bir paragraftaki birkaç link ya da footer'daki kısa bir yasal linkler listesi buna ihtiyaç duymaz; çok fazla nav landmark'ı da her birini bulmayı zorlaştırır.

Q: Yatay bir gezinme çubuğu nasıl yapılır?

Linkleri içindeki bir içine koy, sonra listeye display: flex; list-style: none; padding: 0; ve bir gap ver. Flexbox öğeleri yan yana dizer.

Q: Bir navbar'da geçerli sayfa nasıl gösterilir?

Kullanıcının bulunduğu sayfanın linkine aria-current="page" ekle ve ona [aria-current="page"] seçicisiyle stil ver. Ekran okuyucular da onu böylece geçerli sayfa olarak duyurur.

nav ile bir gezinme çubuğu

Menünü <nav> ile sar ve linkleri bir listeye koy. Flexbox listeyi yatay bir çubuğa çevirir:

<!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 ve padding: 0 madde işaretlerini ve girintiyi kaldırır. Her linkteki display: block, padding'inin çubukta gerçek yer kaplamasını sağlar, böylece padding'li kutunun tamamı tıklama hedefi olur. display: flex satırını sil, aynı menü dikey bir listeye dönüşür; bir kenar çubuğu menüsü de böyle görünür.

<nav> kendisi hiçbir şeye benzemez. Görevi anlamdır: ekran okuyucular onu bir navigation landmark'ı olarak sunar, böylece kullanıcı tek bir tuşla menüye ya da onun ötesine atlayabilir.

Geçerli sayfayı işaretle

Gösterilen sayfanın linkine aria-current="page" ekle. Ekran okuyuculara "buradasın" der ve CSS'e linki vurgulamak için bir tutamak verir:

<!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>

aria-current="page" değerini başka bir linke taşı, vurgu onu takip eder. Bir .active class'ı yerine özelliğe stil vermek görünümü ve erişilebilirliği senkronize tutar: biri olmadan diğerine sahip olamazsın.

Bir sayfanın her biri kendi <nav> elementinde bir ana menüsü, bir breadcrumb'ı ve bir içindekiler tablosu olabilir. Her birine bir aria-label ver, böylece bir ekran okuyucu üç aynı "navigation" girişi yerine "Breadcrumb navigation" duyurur:

<!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'lar sıra önemli olduğu için sıralı bir <ol> listesi kullanır. Eğik çizgiler CSS ::before ile gelir, bu yüzden ekran okuyucular her öğenin arasında "slash" okumaz. Son öğe geçerli sayfadır ve link değildir.

Bir içindekiler tablosu

Aynı sayfanın bölümlerine giden linklerden oluşan bir liste de gezinmedir. #id linkleri o id'ye sahip elemente atlar; önizlemede dene:

<!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>

Burada label, aria-labelledby ile görünür bir başlıktan gelir; başlık zaten ekrandayken bu, aria-label kullanmaktan daha iyidir.

Mobil menü açma kapama butonu

Dar ekranlarda menüler genellikle bir butonun arkasına gizlenir. aria-expanded olan gerçek bir <button> kullan ve linkleri <nav> içinde tut:

<!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 bir ekran okuyucuya menünün açık olup olmadığını söyler, hidden özelliği de liste kapalıyken onu hem ekrandan hem de erişilebilirlik ağacından kaldırır. Geniş ekranlarda listeyi bir media query ile gösterir ve butonu gizlersin.

Sık yapılan hatalar

Her link grubunu <nav> ile sarmak. Onu ana menü, breadcrumb, sayfalama ve içindekiler tabloları için kullan. Metin içindeki linkler gezinme blokları değildir.
Bir <div> ile yapılmış menü butonu. Klavyeyle odaklanamaz ya da basılamaz. <button> kullan.
Label'sız birkaç nav. Birbirinden ayırt edilebilsinler diye her birine aria-label ya da aria-labelledby ekle.
Geçerli linki yalnızca renklendirmek. aria-current="page" ekle; renk tek başına duyurulmaz ve herkes tarafından görülemeyebilir.
Yayındaki sitede href="#" olan linkler. Bir demoda sorun değildir, ama gerçek menü öğelerinin yeni sekmede açıldıklarında da çalışmaları için gerçek URL'lere ihtiyacı vardır. href değerlerinin nasıl çalıştığını link verme sayfası anlatıyor.

Sıkça Sorulan Sorular

HTML'de nav etiketi nedir?

<nav>, site menüsü, içindekiler tablosu ya da breadcrumb gibi başlıca gezinme linklerinden oluşan bir bloğu saran semantik bir elementtir. Ekran okuyucular onu bir navigation landmark'ı olarak listeler, böylece kullanıcılar doğrudan ona atlayabilir.

nav içindeki linkler bir listede mi olmalı?

Yaygın ve iyi bir kalıptır: <li> öğelerinden oluşan bir <ul>, ekran okuyucuların menüde kaç link olduğunu duyurmasını sağlar. Doğrudan <nav> içindeki düz linkler de geçerlidir, örneğin yan yana iki ya da üç link için.

Her link grubu için bir nav elementi gerekir mi?

Hayır. <nav> elementini yalnızca başlıca gezinme blokları için kullan. Bir paragraftaki birkaç link ya da footer'daki kısa bir yasal linkler listesi buna ihtiyaç duymaz; çok fazla nav landmark'ı da her birini bulmayı zorlaştırır.

Yatay bir gezinme çubuğu nasıl yapılır?

Linkleri <nav> içindeki bir <ul> içine koy, sonra listeye display: flex; list-style: none; padding: 0; ve bir gap ver. Flexbox öğeleri yan yana dizer.

Bir navbar'da geçerli sayfa nasıl gösterilir?

Kullanıcının bulunduğu sayfanın linkine aria-current="page" ekle ve ona [aria-current="page"] seçicisiyle stil ver. Ekran okuyucular da onu böylece geçerli sayfa olarak duyurur.

Bir sayfada birden fazla nav olabilir mi?

Evet, örneğin bir ana menü, bir breadcrumb ve bir içindekiler tablosu. Ekran okuyucu kullananlar onları ayırt edebilsin diye her birine "Main" ya da "Breadcrumb" gibi farklı bir aria-label ver.

İlgili kavramlar