Kimlik · Header
Başlık
Her sayfanın en üstünde durur, kurumu adlandırır ve ana menüyü taşır.
- CSS
- kararlı
- JavaScript
- mobil menü
- React
- kararlı
- Vue
- kararlı
Örnekler
HTML kodunu göster
<header class="kiris-baslik-cubugu" data-kiris="baslik-cubugu">
<div class="kiris-kap kiris-baslik-cubugu__ic">
<a class="kiris-baslik-cubugu__marka" href="/">
<img class="kiris-baslik-cubugu__arma" src="/kiris/turk-bayragi.svg" alt="" width="48" height="32">
<span class="kiris-baslik-cubugu__ad">Çalışma ve Sosyal Güvenlik Bakanlığı</span>
</a>
<button class="kiris-baslik-cubugu__menu-dugmesi" type="button" aria-expanded="false" aria-controls="ana-menu">Menü</button>
<nav class="kiris-baslik-cubugu__menu" id="ana-menu" aria-label="Ana menü">
<a href="#">Hizmetler</a>
<a href="#">Duyurular</a>
<a href="#">İletişim</a>
</nav>
</div>
</header>
HTML kodunu göster
<header class="kiris-baslik-cubugu" data-kiris="baslik-cubugu">
<div class="kiris-kap kiris-baslik-cubugu__ic">
<a class="kiris-baslik-cubugu__marka" href="/" aria-label="Sosyal Güvenlik Kurumu ana sayfa">
<img class="kiris-baslik-cubugu__logo kiris-baslik-cubugu__logo--beyaz" src="/kiris/kurumlar/sgk-beyaz.svg" alt="Sosyal Güvenlik Kurumu" width="1303" height="640">
</a>
<button class="kiris-baslik-cubugu__menu-dugmesi" type="button" aria-expanded="false" aria-controls="ana-menu-2">Menü</button>
<nav class="kiris-baslik-cubugu__menu" id="ana-menu-2" aria-label="Ana menü">
<a href="#">Çalışan</a>
<a href="#">Emekli</a>
<a href="#">İşveren</a>
<a href="#">İletişim</a>
</nav>
</div>
</header>
Ayşe Yılmaz Çıkış
HTML kodunu göster
<header class="kiris-baslik-cubugu" data-kiris="baslik-cubugu">
<div class="kiris-kap kiris-baslik-cubugu__ic">
<a class="kiris-baslik-cubugu__marka" href="/"><img class="kiris-baslik-cubugu__arma" src="/kiris/turk-bayragi.svg" alt="" width="48" height="32"><span class="kiris-baslik-cubugu__ad">Sosyal Güvenlik Kurumu</span></a>
<div class="kiris-baslik-cubugu__oturum"><span class="kiris-avatar kiris-avatar--kucuk" aria-hidden="true">AY</span><span class="kiris-baslik-cubugu__kullanici">Ayşe Yılmaz</span><a class="kiris-baslik-cubugu__cikis" href="#"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-logout"/></svg> Çıkış</a></div>
<button class="kiris-baslik-cubugu__menu-dugmesi" type="button" aria-expanded="false" aria-controls="ana-menu-3">Menü</button>
<nav class="kiris-baslik-cubugu__menu" id="ana-menu-3" aria-label="Ana menü"><a href="#">Başvurularım</a><a href="#">Belgelerim</a><a href="#">Mesajlar</a></nav>
</div>
</header>
Ne zaman kullanılır
- Her sayfada aynı biçimde kullanın.
- Resmî site afişinin hemen altında durur.
Erişilebilirlik
<header>ve<nav>etiketlerini kullanın.- Mobil menü düğmesi
aria-expandedtaşır. - Menü açıkken odak menü içinde kalır.
Karşılanan WCAG 2.2 ölçütleri 1.3.12.1.22.4.14.1.2
Kaynak
Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, FR, IE, KR, JP, DK, DE.
Bu bileşenin kodu depoda:
- Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
- CSS katmanları,
kiris-headerile başlayan sınıflar - Davranış betiği,
data-kiris="baslik-cubugu"başlatıcısı