Gezinme · Side navigation

Yan menü

Bir bölümün alt sayfaları arasında gezinmeyi sağlar. İçeriğin solunda durur.

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

Örnekler

İki düzey Canlı örnek

HTML kodunu göster

<nav class="trds-yan-menu" aria-label="Emeklilik bölümü">
  <ul class="trds-yan-menu__liste">
    <li><a href="#">Genel bilgi</a></li>
    <li><a href="#" aria-current="page">Başvuru</a>
      <ul>
        <li><a href="#">Gerekli belgeler</a></li>
        <li><a href="#">Ücretler</a></li>
      </ul>
    </li>
    <li><a href="#">Sıkça sorulan sorular</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Ne zaman kullanılır

Bir bölümde 4 ile 15 arasında sayfa varsa kullanın.
Adım adım bir akışta kullanmayın. Orada adım göstergesi kullanın.

Erişilebilirlik

<nav aria-label> ile adlandırılır. Bir sayfada birden çok nav varsa adlar farklı olur.
Geçerli sayfa aria-current="page" taşır.
Küçük ekranda menü içeriğin üstüne geçer, gizlenmez.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 2.4.7 2.4.8

Kaynak

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