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="kiris-alt-gezinme" aria-label="Ana bölümler">
  <a href="#" aria-current="page"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-home"/></svg><span>Ana sayfa</span></a>
  <a href="#"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-search"/></svg><span>Ara</span></a>
  <a href="#"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-date"/></svg><span>Randevu</span></a>
  <a href="#"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-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.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-bottom-navigation ile başlayan sınıflar