Gezinme · Bottom navigation

Alt gezinme

Telefonda ekranın altına yapışan üç ile beş ana bölüm. Uygulama benzeri hizmetler için.

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

Örnekler

Dört bölüm Canlı örnek · tam genişlik

HTML kodunu göster

<nav class="trds-alt-gezinme" aria-label="Ana bölümler">
  <a href="#" aria-current="page"><svg class="trds-simge" aria-hidden="true"><use href="#edk-home"/></svg><span>Ana sayfa</span></a>
  <a href="#"><svg class="trds-simge" aria-hidden="true"><use href="#edk-search"/></svg><span>Ara</span></a>
  <a href="#"><svg class="trds-simge" aria-hidden="true"><use href="#edk-date"/></svg><span>Randevu</span></a>
  <a href="#"><svg class="trds-simge" aria-hidden="true"><use href="#edk-user"/></svg><span>Hesabım</span></a>
</nav>

Ne zaman kullanılır

Kullanıcının sık geçtiği üç ile beş bölüm varsa kullanın.
Masaüstünde gizlenir, başlık çubuğu menüsü görünür.

Erişilebilirlik

<nav aria-label="Ana bölümler">. Geçerli bölüm aria-current="page" taşır.
Her öge simge ve metin taşır. Yalnız simge yeterli değildir. Dokunma alanı 44 pikseldir.

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

Kaynak

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