M.AIM.AISoloLabsUI Sözlüğü · Gezinme

← UI Sözlüğü

Üst çubuk navbar / header

bilinen diğer adları navbar · header · üst menü · top bar

Böyle diyorsan: "hani şu en üstteki bar" · "kaydırınca yukarıda sabit kalan şey" → bunun adı üst çubuk.

Sayfanın tepesindeki logo + menü şeridi; çoğu zaman kaydırınca üstte sabitlenir (sticky).

Üst çubuk, sayfanın tepesinde duran marka + gezinme şeridir ve sitenin her sayfasında AYNI kalması beklenir; tutarlılık burada bir tasarım tercihi değil kullanılabilirlik kuralıdır — kullanıcı bir kez öğrendiği yeri her sayfada aynı yerde bulmalıdır. Yapışkan (sticky) yapıldığında iki bedeli hesaba katmak gerekir: ekranın üstünden sürekli yer yer ve mobilde bu yer pahalıdır; ayrıca sayfa içi bir bağlantıya atlandığında hedef başlık çubuğun ALTINDA kalır. İkincisi görünmez bir hatadır ve çoğu sitede vardır: kullanıcı bağlantıya tıklar, doğru yere gider ama aradığı başlığı göremez.

Kapsam: Bu madde sayfanın üst gezinme şeridini kapsar. Mobilde menüyü açan ikon Hamburger, açılan panel Kenar Menü, çubuk içindeki eylem listeleri ise Açılır Menü maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
▸ içerik kendiliğinden kayıyor — çubuk üstte YAPIŞIK (sen de kaydır)
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Sticky bir navbar ekle: solda ana sayfaya linkli logo, sağda 3 gezinme linki (aktif sayfa vurgulu) ve en sağda tek birincil CTA butonu. Kaydırınca üstte sabit kalsın, altında ince bir ayırıcı çizgi/gölge belirsin. Mobilde linkler hamburger menüye toplansın.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Navbar'ım bozuk; şu klasik hataları sırayla ele: (1) sticky çalışmıyor çünkü üst kapsayıcılardan birinde overflow: hidden var; (2) z-index düşük, sayfa içeriği çubuğun üstüne biniyor; (3) sabitlenen çubuğun yüksekliği telafi edilmediği için içerik altında kalıyor/zıplıyor; (4) mobil kırılımı tanımsız, linkler taşıyor; (5) aktif-sayfa vurgusu yanlış linke düşüyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Logo alanı<a href="/">

    Sol uçtaki marka işareti — her zaman ana sayfaya link olur.

  • 2Link grubu<nav>

    Sayfalar arası gezinme linkleri; aktif sayfa görsel olarak vurgulanır.

  • 3CTA butonubirincil buton

    Sağ uçtaki tek birincil eylem — navbar'da birden çok birincil buton olmaz.

  • 4Yapışkanlıkposition: sticky; top: 0

    Kaydırınca çubuğun üstte kalması; z-index ile içeriğin üstünde tutulur.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ANormal<header> + <nav>

    Sayfa başında durur. Anlamsal etiketlerle işaretlenirse ekran okuyucu kullanıcısı doğrudan gezinme bölgesine atlayabilir.

  • BYapışkanposition: sticky

    Kaydırınca üstte kalır. Üst kapsayıcılardan birinde overflow: hidden varsa sessizce çalışmaz — en sık karşılaşılan sticky hatası budur.

  • CKüçülmüşkaydırınca incelir

    Yer kazanmak için yükseklik azalır. Değişim sırasında sayfa içeriği zıplamamalı; yükseklik farkı telafi edilmeli.

  • DAktif sayfaaria-current="page"

    Bulunulan sayfanın linki işaretli. Yalnız renkle vurgulamak yetmez; aria-current olmadan ekran okuyucu nerede olduğunu söyleyemez.

  • EMobilhamburgere toplanır

    Dar ekranda linkler menüye girer. Birincil eylem çoğu zaman dışarıda bırakılır — menünün içine giren eylem kullanılmaz hâle gelir.

KODDAKİ ADLARI
HTML<header> + <nav>anlamsal etiketler
CSSposition: sticky; top: 0yapışkanlığı yapan kural
CSSz-indexüstte kalma katmanı
HTMLatlama linki (skip link)tekrar eden menüyü atlatır
ERİŞİLEBİLİRLİK & SIK HATA
  • Bir atlama linki (skip link) koy: sayfanın ilk odaklanabilir öğesi 'İçeriğe geç' olmalı (WCAG 2.4.1). Bu olmadan klavye kullanıcısı her sayfada aynı menüyü baştan geçmek zorunda kalır.
  • Yapışkan çubuk sayfa içi bağlantılarda hedefi örter. scroll-margin-top ile çubuk yüksekliği kadar boşluk bırak, yoksa kullanıcı gittiği başlığı göremez.
  • Aktif sayfayı aria-current="page" ile işaretle; renk vurgusu görme engelli kullanıcıya bir şey söylemez.
  • Gezinmeyi her sayfada aynı sırada tut (WCAG 3.2.3); sıra değişirse öğrenilmiş konum kaybolur.
  • Çubukta tek birincil eylem bulunsun; iki 'birincil' buton kullanıcıya hangisinin ana yol olduğunu sormaya başlar.
SIK KARIŞTIRILANLAR

Kenar menüden farkı. Üst çubuk YATAY ve sığdır — az sayıda üst düzey bağlantı taşır; kenar menü DİKEY ve derindir — çok sayıda bölümü, gruplandırarak gösterir. Seçim içerik miktarına göre yapılır: pazarlama sitesinde üst çubuk, yönetim panelinde kenar menü doğaldır. Otuz bağlantıyı üst çubuğa sığdırmaya çalışmak, kaçınılmaz olarak iç içe açılır menüler doğurur.

Kenar menü sayfasına git →

Alt bilgiden farkı. Üst çubuk BİRİNCİL gezinmedir: kullanıcının gitmesi beklenen az sayıda yer. Alt bilgi ise ikincil ve kapsayıcıdır: yasal metinler, iletişim, tüm bölümlerin haritası. Üst çubuğa alt bilgi mantığıyla yaklaşıp her şeyi koymak, hiçbir şeyin öne çıkmaması demektir.

Alt bilgi sayfasına git →

KAYNAKLAR
Bu parçayı 12 ayrı stilde gör. Tam sayfa stil örneklerindeki landing bu parçadan da kurulu; stilin parçayı nasıl giydirdiğini yan yana karşılaştırabilirsin — stil parçayı değiştirmez, giydirir.

Tam sayfa örneğini aç →üstteki şeritten stil atlayabilirsin

İLGİLİ PARÇALAR

Kenar menü sidebarHamburger menü hamburger menuAlt bilgi footerAçılır menü dropdown

AYNI AİLEDE · GEZINME