Gezinme · In-page navigation

Sayfa içi gezinme

Uzun bir sayfanın bölümlerini listeler ve her birine bağlantı verir.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

HTML kodunu göster

<nav class="trds-icindekiler" aria-labelledby="ic-baslik">
  <h2 class="trds-icindekiler__baslik" id="ic-baslik">Bu sayfada</h2>
  <ol class="trds-icindekiler__liste">
    <li><a href="#kosullar">Başvuru koşulları</a></li>
    <li><a href="#belgeler">Gerekli belgeler</a></li>
    <li><a href="#sure">Süreç ve süre</a></li>
    <li><a href="#itiraz">İtiraz yolu</a></li>
  </ol>
</nav>

Ne zaman kullanılır

Sayfa 4 ekrandan uzunsa ve 3 üstünde bölüm başlığı varsa kullanın.
Mevzuat, kılavuz ve sıkça sorulan sorular sayfalarında kullanın.

Erişilebilirlik

Bağlantı hedefi bir başlıktır ve id taşır.
Liste sıralıdır, <ol>. Sıra bilgi taşır.
Sabit konumlu sürüm klavye odağını kapatmaz.

Karşılanan WCAG 2.2 ölçütleri 2.4.1 2.4.5

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, KR, JP, DK.