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="trds-baslik-cubugu" data-trds="baslik-cubugu">
<div class="trds-kap trds-baslik-cubugu__ic">
<a class="trds-baslik-cubugu__marka" href="/">
<img class="trds-baslik-cubugu__arma" src="/trds/turk-bayragi.svg" alt="" width="48" height="32">
<span class="trds-baslik-cubugu__ad">Çalışma ve Sosyal Güvenlik Bakanlığı</span>
</a>
<button class="trds-baslik-cubugu__menu-dugmesi" type="button" aria-expanded="false" aria-controls="ana-menu">Menü</button>
<nav class="trds-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="trds-baslik-cubugu" data-trds="baslik-cubugu">
<div class="trds-kap trds-baslik-cubugu__ic">
<a class="trds-baslik-cubugu__marka" href="/" aria-label="Sosyal Güvenlik Kurumu ana sayfa">
<img class="trds-baslik-cubugu__logo trds-baslik-cubugu__logo--beyaz" src="/trds/kurumlar/sgk-beyaz.svg" alt="Sosyal Güvenlik Kurumu" width="1303" height="640">
</a>
<button class="trds-baslik-cubugu__menu-dugmesi" type="button" aria-expanded="false" aria-controls="ana-menu-2">Menü</button>
<nav class="trds-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="trds-baslik-cubugu" data-trds="baslik-cubugu">
<div class="trds-kap trds-baslik-cubugu__ic">
<a class="trds-baslik-cubugu__marka" href="/"><img class="trds-baslik-cubugu__arma" src="/trds/turk-bayragi.svg" alt="" width="48" height="32"><span class="trds-baslik-cubugu__ad">Sosyal Güvenlik Kurumu</span></a>
<div class="trds-baslik-cubugu__oturum"><span class="trds-avatar trds-avatar--kucuk" aria-hidden="true">AY</span><span class="trds-baslik-cubugu__kullanici">Ayşe Yılmaz</span><a class="trds-baslik-cubugu__cikis" href="#"><svg class="trds-simge" aria-hidden="true"><use href="#edk-logout"/></svg> Çıkış</a></div>
<button class="trds-baslik-cubugu__menu-dugmesi" type="button" aria-expanded="false" aria-controls="ana-menu-3">Menü</button>
<nav class="trds-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.