Ana içeriğe geç
Kiriş Türkiye kamu hizmetleri için tasarım sistemi

Gezinme · Mega menu

Geniş menü

Başlık çubuğunun altında, her ana konu için tam genişlikte bir bağlantı paneli. Bir kerede bir panel açık.

CSS
kararlı
JavaScript
aç ve kapat
React
kararlı
Vue
kararlı

Örnekler

İki konu Canlı örnek · tam genişlik
HTML kodunu göster
<nav class="kiris-genis-menu" aria-label="Ana konular" data-kiris="genis-menu">
  <div class="kiris-kap kiris-genis-menu__ic">
    <button class="kiris-genis-menu__dugme" type="button" aria-expanded="false" aria-controls="gm-calisan">Çalışan</button>
    <button class="kiris-genis-menu__dugme" type="button" aria-expanded="false" aria-controls="gm-emekli">Emekli</button>
    <a class="kiris-genis-menu__dugme" href="#">İletişim</a>
  </div>
  <div class="kiris-genis-menu__panel" id="gm-calisan" hidden>
    <div class="kiris-kap kiris-genis-menu__sutunlar">
      <div><p class="kiris-genis-menu__baslik">Sigortalılık</p><ul class="kiris-genis-menu__liste"><li><a href="#">Hizmet dökümü</a></li><li><a href="#">İşe giriş bildirgesi</a></li><li><a href="#">4A, 4B, 4C</a></li></ul></div>
      <div><p class="kiris-genis-menu__baslik">Sağlık</p><ul class="kiris-genis-menu__liste"><li><a href="#">Provizyon sorgulama</a></li><li><a href="#">Rapor işlemleri</a></li></ul></div>
      <div><p class="kiris-genis-menu__baslik">Ödemeler</p><ul class="kiris-genis-menu__liste"><li><a href="#">Geçici iş göremezlik</a></li><li><a href="#">Emzirme ödeneği</a></li></ul></div>
    </div>
  </div>
  <div class="kiris-genis-menu__panel" id="gm-emekli" hidden>
    <div class="kiris-kap kiris-genis-menu__sutunlar">
      <div><p class="kiris-genis-menu__baslik">Aylık</p><ul class="kiris-genis-menu__liste"><li><a href="#">Ne zaman emekli olurum?</a></li><li><a href="#">Maaş bilgisi</a></li><li><a href="#">Bayram ikramiyesi</a></li></ul></div>
      <div><p class="kiris-genis-menu__baslik">Başvuru</p><ul class="kiris-genis-menu__liste"><li><a href="#">Yaşlılık aylığı</a></li><li><a href="#">Ölüm aylığı</a></li></ul></div>
    </div>
  </div>
</nav>

Ne zaman kullanılır

Erişilebilirlik

Karşılanan WCAG 2.2 ölçütleri 2.1.12.4.34.1.2

Kaynak

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

Bu bileşenin kodu depoda: