Gezinme · Service navigation

Hizmet gezinmesi

Bir hizmetin adını ve kendi bölümlerini taşıyan ikinci çubuk. Başlık çubuğu kurumu, bu çubuk hizmeti söyler.

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

Örnekler

Temel Canlı örnek · tam genişlik

HTML kodunu göster

<div class="trds-hizmet-gezinme">
  <div class="trds-kap trds-hizmet-gezinme__ic">
    <a class="trds-hizmet-gezinme__ad" href="#">Emeklilik başvurusu</a>
    <nav aria-label="Hizmet menüsü"><ul class="trds-hizmet-gezinme__liste"><li><a href="#" aria-current="page">Başvuru</a></li><li><a href="#">Belgeler</a></li><li><a href="#">Durum</a></li><li><a href="#">Yardım</a></li></ul></nav>
  </div>
</div>

Ne zaman kullanılır

Bir hizmetin üç ile altı bölümü varsa kullanın.
Tek sayfalık bir hizmette kullanmayın.

Erişilebilirlik

<nav aria-label="Hizmet menüsü"> ile bölge olur. Geçerli sayfa aria-current="page" taşır.
Hizmet adı bağlantıdır ve hizmetin ana sayfasına gider.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, FI, FR.