Gezinme · Breadcrumb

Sayfa yolu

Kullanıcının site yapısında nerede olduğunu gösterir ve üst seviyeye dönmeyi sağlar.

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

Örnekler

Temel Canlı örnek

HTML kodunu göster

<nav class="trds-yol" aria-label="Sayfa yolu">
  <ol class="trds-yol__liste">
    <li><a href="/">Ana sayfa</a></li>
    <li><a href="#">Hizmetler</a></li>
    <li><span aria-current="page">Emeklilik başvurusu</span></li>
  </ol>
</nav>

Ne zaman kullanılır

Üç seviyeden derin site yapılarında kullanın.
Adım adım ilerleyen bir hizmet akışında kullanmayın. Orada geri bağlantısı kullanın.

Erişilebilirlik

<nav aria-label="Sayfa yolu"> içine alın.
Son öğe bağlantı değildir ve aria-current="page" taşır.
Ayraç karakteri CSS ile eklenir, metne yazılmaz.

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

Kaynak

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