Navigasyon Menüsü Nasıl Tasarlanır?

Kaç Öğe Olmalı?

İdeal öğe sayısı 5-7 arası. Miller's Law der ki insan kısa süreli hafızası 7±2 öğe tutabilir. 5'ten az sitede yeterli içerik olmadığı izlenimi verir, 10'dan fazla kullanıcıyı bunaltır.

Site tipine göre değişir tabii. Blog 4 öğe ile yetinir: Ana Sayfa, Yazılar, Hakkında, İletişim. E-ticaret 8-9 gerektirebilir: kategoriler, kampanyalar, yardım. Kurumsal site 6-7: hizmetler, referanslar, kariyer.

7'den fazla öğe gerekiyorsa gruplandırın. "Ürünler" altında dropdown: Yazılım, Donanım, Hizmetler. Mega menü de seçenek. Her öğeyi üst seviyeye koymayın, öncelik belirleyin.

Analytics'e bakın: hangi sayfalar en çok ziyaret ediliyor, hangileri dönüşüm sağlıyor? Onlar menüde olmalı. Az ziyaret edilenler footer'a veya sidebar'a. Menü prime real estate, boşa harcamayın.

Sıralama ve Önceliklendirme

Soldan sağa önem azalır (LTR dillerde). En önemli öğe solda, en az önemli sağda. Logo genellikle en solda, menü onun sağında. Sağ uçta CTA veya arama kutusu.

Tipik sıralama: Ana Sayfa, Ürünler/Hizmetler, Hakkında, Blog, İletişim. Her site için geçerli değil tabii. E-ticarette "Kampanyalar" öne çıkabilir. SaaS'ta "Fiyatlandırma" kritik, erken görünmeli. Ajans sitesinde "Portföy" önemli.

Ana Sayfa linki gerekli mi? Tartışmalı. Logo zaten ana sayfaya link, ayrı "Ana Sayfa" gereksiz olabilir. Oysa bazı kullanıcılar logo'nun tıklanabilir olduğunu bilmez. Güvenli yol: hem logo hem link. Ya da logo yeterli, menü alanı başka öğelere ayrılır.

CTA butonu menüde olmalı, özellikle SaaS ve hizmet sitelerinde. "Ücretsiz Dene", "Demo Al", "Hemen Başla" menünün sağında, farklı renkle. Diğer linklerden görsel olarak ayrılmalı: farklı arka plan, border, hover efekti.

Büyük sitelerde arama kutusu menüde olmalı. E-ticaret, haber, dokümantasyon sitelerinde kritik. Menünün sağında, ikon veya küçük input. Tıklanınca genişler veya overlay açılır. Küçük sitelerde gereksiz.

Dropdown ve Alt Menüler

İçerik çok olduğunda dropdown gerekli. "Ürünler" altında 15 ürün varsa hepsini üst menüde gösteremezsiniz. Hover veya click ile açılır, alt ürünler listelenir.

Kullanıcı deneyimini zorlaştırır ama. Fareyi dropdown'a götürürken menü kapanabilir. Mobilde daha da zor: hover yok, her şey click. Mümkün olduğunca az kullanın. Alternatif: mega menü veya ayrı landing page.

Maksimum 2 seviye. Üst menü > Dropdown > Alt dropdown. 3 seviye kullanıcıyı kaybettirir, fare kontrolü zorlaşır, mobilde neredeyse imkansız. 3 seviye gerekiyorsa site yapısını yeniden düşünün.

Açılma yöntemi: hover mı, click mi? Masaüstünde hover daha hızlı, yanlışlıkla açılma riski var. Click daha kontrollü, bir adım daha ekler. Hibrit çözüm: hover ile açılır, click ile sabitlenir. Mobilde her zaman click.

İçerik: sadece linkler mi, açıklama ve görseller de mi? Basit dropdown sadece linkler, 5-10 öğe. Zengin dropdown her link altında kısa açıklama, belki ikon. Mega menü görseller, kategoriler, kampanyalar. İçerik yoğunluğuna bağlı.

Mobil Navigasyon Stratejisi

Mobilde farklı çalışır. Ekran dar, hover yok, dokunmatik etkileşim. Masaüstü menüsü sıkışır, kullanılamaz hale gelir. Hamburger menü, bottom navigation veya tab bar gerekir.

Hamburger: üç çizgi ikonu, genellikle sol üstte. Tıklanınca menü yan veya üstten açılır. Yaygın, tanıdık, yer kaplamaz. Gizli ama, kullanıcı görmek için tıklamalı. Bir adım daha ekler, bazıları fark etmez.

Bottom navigation: ekranın altında 4-5 ikon. Ana Sayfa, Arama, Favoriler, Profil. Mobil uygulamalarda yaygın, web'de de kullanılıyor. Başparmak erişimi kolay, ekran alanı kaplar ama.

Tab bar: üstte yatay kaydırılabilir sekmeler. Haberler, Spor, Ekonomi, Teknoloji. Kaydırma ile daha fazla sekme görünür. Instagram, Twitter'da yaygın. Web'de daha az kullanılır, içerik yoğun sitelerde işe yarar.

Hibrit: hamburger + bottom navigation. Hamburger'da tüm sayfalar, bottom'da en önemli 4-5 sayfa. Hem hızlı erişim hem tam menü. İki navigasyon sistemi karmaşıklık yaratabilir, tutarlı olmalı.

Açılma davranışı: overlay, drawer veya push. Overlay menü içeriğin üstünde açılır, arka plan kararır. Drawer yan taraftan kayar, içerik itilir veya gizlenir. Push menü açılırken içerik yana kayar. Overlay en yaygın, performans açısından en hafif.

Sticky Navigation

Kullanıcı scroll ettikçe menü üstte sabit kalır. Her an erişebilir, yukarı scroll etmek zorunda değil. Ekran alanı kaplar, özellikle mobilde içerik alanı azalır.

Uzun sayfalarda kullanın. Blog yazısı, ürün sayfası, dokümantasyon. Kullanıcı sayfanın ortasında, başka sayfaya gitmek istiyor. Sticky kolaylaştırır. Kısa sayfalarda gereksiz, zaten menü görünür.

Scroll sonrası küçültün, özellikle mobilde. İlk yükleme tam boy logo, geniş menü. Scroll sonrası küçük logo, kompakt menü. Ekran alanı kazandırır, içerik daha fazla görünür. JavaScript ile scroll pozisyonu tespit edilir, CSS class eklenir.

Performans: her scroll event'inde JavaScript çalışırsa düşer. Throttle veya debounce kullanın. Scroll event'i 100ms'de bir tetiklenir, her scroll'da değil. Intersection Observer API daha performanslı.

Erişilebilirlik: klavye kullanıcıları için sorun yaratabilir. Focus sticky menüde kaybolursa kullanıcı nerede olduğunu bilemez. Focus yönetimi gerekir. Sticky aktifken focus görünür kalmalı. Skip link ekleyin: "İçeriğe atla".

Görsel Tasarım ve Tipografi

Görsel olarak belirgin olmalı, baskın olmamalı. İçeriği gölgelemeden yönlendirmeli. Renk, tipografi, boşluk kritik.

Arka plan: beyaz, açık gri veya marka rengi. Beyaz temiz, minimal. Marka rengi kimlik güçlendirir, kontrast dikkat edilmeli. Koyu arka plan + açık metin minimum 4.5:1 (WCAG AA).

Font boyutu 14-16px ideal. Daha küçük okunmaz, daha büyük yer kaplar. Mobilde 14px yeterli, masaüstünde 16px rahat. Font ağırlığı normal (400) veya medium (500). Bold (700) çok ağır.

Link arası boşluk 20-40px. Çok dar linkler sıkışır, tıklama zorlaşır. Çok geniş menü dağınık görünür. Mobilde dokunmatik hedef minimum 44x44px, boşluk buna göre ayarlanmalı.

Hover efekti: link üzerine gelindiğinde görsel geri bildirim. Renk değişimi, alt çizgi, arka plan. Basit ve hızlı, 200-300ms transition. Abartılı animasyon dikkat dağıtır. Mobilde hover yok, active state.

Aktif sayfa gösterimi: kullanıcı hangi sayfada olduğunu bilmeli. Farklı renk, alt çizgi veya arka plan. Navigasyon bağlamı sağlar. Breadcrumb ile birlikte kullanılırsa bağlam daha net.

Erişilebilirlik Gereksinimleri

Klavye kullanıcıları, ekran okuyucu kullanıcıları, motor beceri sorunu olanlar menüyü kullanabilmeli. WCAG 2.1 AA standardına uyum zorunlu.

Semantik HTML: <nav> etiketi kullanın. Tarayıcılara ve ekran okuyuculara navigasyon bölgesi olduğunu bildirir. İçeride <ul> ve <li>. <div> ile menü semantik değil.

ARIA etiketleri: aria-label="Ana navigasyon" menüyü tanımlar. Dropdown için aria-haspopup="true" ve aria-expanded="false". Aktif sayfa için aria-current="page". Ekran okuyuculara ek bilgi verir.

Klavye navigasyonu: Tab ile linkler arasında gezilir. Enter ile link açılır. Dropdown varsa Arrow tuşları ile alt menüde gezilir. Escape ile dropdown kapanır. Focus görünür olmalı: outline veya background-color değişimi.

Skip link: "İçeriğe atla" menünün başında. Klavye kullanıcıları menüyü atlar, doğrudan içeriğe gider. Görsel olarak gizli, focus aldığında görünür. Uzun menülerde kritik.

Renk kontrastı: metin ve arka plan arasında yeterli kontrast. WCAG AA 4.5:1, AAA 7:1. Hover ve focus durumlarında da korunmalı. Yalnızca renk ile bilgi verilmemeli, aktif sayfa hem renk hem alt çizgi ile gösterilmeli.

Ne Zaman Basitleştirilmeli?

Her sayfada aynı olmak zorunda değil. Sayfa tipine göre basitleştirilebilir veya kaldırılabilir. Landing page'lerde dikkat dağıtır. Kullanıcı tek hedefe odaklanmalı, menü seçenek fazlalığı yaratır.

Minimal navigasyon: sadece logo ve CTA. Menü yok, kullanıcı sayfada kalır, dönüşüm odaklı. A/B testler gösteriyor: landing page'de menü kaldırıldığında dönüşüm %20-40 artabiliyor. Dikkat: kullanıcı çıkış yolu arıyorsa menü yokluğu frustrasyon yaratır.

Checkout sayfalarında minimal olmalı. Kullanıcı ödeme yapıyor, dikkat dağıtılmamalı. Logo + "Yardım" yeterli. Tam menü checkout'tan uzaklaştırabilir, sepet terk oranı artar.

Blog yazılarında tam olabilir, sticky olmamalı. Kullanıcı okumaya odaklanmış, menü scroll sonrası kaybolabilir. Yazı sonunda navigasyon veya ilgili yazılar gösterilebilir.

404 sayfalarında kritik. Kullanıcı kayboldu, menü yol gösterir. Tam menü + arama + popüler sayfalar. Hızlıca istediği yere ulaşmalı, siteden çıkmamalı.

Sayfa Tipine Göre Strateji

Ana sayfada tam ve belirgin olmalı. Kullanıcı siteyi keşfediyor, menü harita görevi görür. Tüm ana bölümler menüde. CTA vurgulanmalı. Büyük sitelerde arama eklenmeli.

Ürün sayfalarında ikincil öncelikte. Kullanıcı ürüne odaklanmış, menü dikkat dağıtmamalı. Sticky küçültülmeli veya scroll sonrası kaybolmalı. Breadcrumb daha kullanışlı, kategoriye dönülebilir.

Kategori sayfalarında filtreleme desteklemeli. Üst menü + yan filtre. Hem kategoriler arası geçiş hem kategori içinde filtre. Mobilde filtreler drawer veya modal.

Hakkımızda sayfasında standart. "Ekip", "Kariyer", "Basın" gibi alt sayfalar varsa sayfa içi navigasyon (anchor linkler) eklenebilir. Uzun sayfada hızlıca bölümler arası geçiş.

İletişim sayfasında minimal olabilir. Kullanıcı zaten iletişime geçmek istiyor, başka sayfaya yönlendirmeye gerek yok. Tamamen kaldırılmamalı, fikir değiştirebilir.

Performans ve Yükleme

Performansı etkiler. Özellikle mega menü, dropdown, sticky JavaScript ve CSS yükü bindirir. İlk yükleme süresi, LCP, FID etkilenir.

Critical CSS: menü above-the-fold'da, critical CSS'e dahil edilmeli. Geç yüklenirse layout shift (CLS) oluşur. Inline veya ayrı dosyada, preload ile yüklenmeli.

JavaScript defer: defer veya async ile yüklenebilir. Menü etkileşimi (dropdown, hamburger) JavaScript'e bağlıysa defer sorun yaratabilir. Kullanıcı tıklıyor, JavaScript henüz yüklenmemiş. Kritik JavaScript inline, geri kalanı defer.

Lazy loading: mega menü içeriği lazy loading ile yüklenebilir. İlk açılışta boş, hover veya click ile içerik yüklenir. İlk yükleme süresini azaltır, ilk açılışta gecikme olur.

Icon font vs SVG: menüde ikonlar varsa (hamburger, arama, sepet) SVG kullanın. Icon font (Font Awesome) 50-100 KB, tüm ikonları yükler. SVG inline, sadece kullanılan ikonlar, 2-5 KB. Performans farkı belirgin.

Render-blocking: menü CSS'i render-blocking olabilir. Tarayıcı CSS yüklenene kadar render etmez. Critical CSS inline, non-critical CSS async. CSS-in-JS kullanılırsa component-based yükleme.

SEO ve Internal Linking

SEO açısından değerli. Her sayfada tekrar ediyor, internal linking güçlendiriyor. Header linkleri footer linklerinden daha değerli, Google daha fazla ağırlık veriyor.

Önemli sayfalar menüde olmalı: ana kategoriler, hizmetler, ürünler. Arama motorları için de önemli, indexlenmeli. Az önemli sayfalar (yasal, SSS) footer'da olabilir.

Anchor text açıklayıcı olmalı. "Ürünler" yerine "Yazılım Ürünleri" daha iyi. Keyword stuffing yapmayın: "En İyi Yazılım Ürünleri 2026" spam. Doğal, kısa, açıklayıcı.

Google dropdown içeriğini indexler mi? Evet, HTML'de varsa. JavaScript ile yüklenen indexlenmeyebilir. SSR (server-side rendering) kullanılırsa dropdown içeriği HTML'de, SEO dostu.

Breadcrumb + navigasyon birlikte kullanılırsa internal linking daha güçlü. Breadcrumb sayfa hiyerarşisini gösterir, navigasyon site yapısını. Google breadcrumb'ı arama sonuçlarında gösterir, CTR artar.

Yaygın Hatalar

Hata 1: Çok fazla öğe. Menüde 15 link, kullanıcı bunalıyor. Önceliklendirin, 5-7 öğe yeterli. Geri kalanı dropdown veya footer'da.

Hata 2: Belirsiz etiketler. "Çözümler", "Hizmetler", "Ürünler" ne fark var? Kullanıcı bilmiyor. Açıklayıcı olun: "Yazılım Çözümleri", "Danışmanlık Hizmetleri", "Donanım Ürünleri".

Hata 3: Mobilde kullanılamaz. Masaüstünde güzel, mobilde linkler sıkışmış, tıklanamıyor. Responsive test yapın, dokunmatik hedef minimum 44x44px, hamburger menü.

Hata 4: Erişilebilirlik eksikliği. Klavye ile erişilemiyor, ekran okuyucu okumuyor. Semantik HTML, ARIA etiketleri, klavye navigasyonu, focus görünürlüğü.

Hata 5: Performans sorunu. Menü 500 KB JavaScript yüklüyor, sayfa yavaş açılıyor. JavaScript minimize edin, defer kullanın, critical CSS inline, lazy loading.

Hata 6: Aktif sayfa gösterilmiyor. Kullanıcı hangi sayfada olduğunu bilmiyor. Aktif linki vurgulayın, renk veya alt çizgi ile. aria-current="page" ekleyin.

Hata 7: Dropdown fare kontrolü zor. Kullanıcı dropdown'a giderken menü kapanıyor. Hover delay (300ms), dropdown ile menü arası boşluk yok, invisible bridge.

Test ve Optimizasyon

Canlıya alındıktan sonra test edilmeli ve optimize edilmeli. Kullanıcı davranışı, analytics, A/B testler iyileştirmeye yön verir.

Heatmap analizi: kullanıcılar neresine tıklıyor? Hangi linkler popüler, hangileri hiç tıklanmıyor? Hotjar, Crazy Egg heatmap sağlar. Tıklanmayan linkler kaldırılabilir veya yeniden konumlandırılabilir.

Session recording: kullanıcılar menüde nasıl geziniyor? Dropdown'ı açıp kapatıyorlar mı? Hamburger menüyü buluyorlar mı? Kayıtlar izlenerek kullanılabilirlik sorunları tespit edilir.

Analytics: Google Analytics'te navigasyon tıklamaları izlenir. Event tracking: category: "Navigation", action: "Click", label: "Ürünler". Hangi linkler en çok tıklanıyor? Hangi sayfalardan menü kullanılıyor?

A/B test: farklı menü yapıları test edilir. 5 öğe vs 7 öğe. Dropdown vs mega menü. Sticky vs non-sticky. Dönüşüm oranı, bounce rate, sayfa başına görüntüleme karşılaştırılır.

Kullanıcı geri bildirimi: anket, feedback formu. "Aradığınızı buldunuz mu?" "Menü kullanımı kolay mıydı?" Kullanıcılar doğrudan sorun bildiriyor, değerli.

Performans testi: Lighthouse, WebPageTest. Menü LCP'yi etkiliyor mu? JavaScript yükleme süresi ne kadar? CLS var mı? Her deploy sonrası kontrol edilmeli.

Gelecek Trendler

Evrim geçiriyor. Geleneksel yatay menü yerini daha esnek yapılara bırakıyor. Özellikle mobil-first yaklaşımda stratejiler değişiyor.

Voice navigation: sesli komutla navigasyon. "Ürünler sayfasına git" komutu ile sayfa değişir. Henüz yaygın değil, akıllı asistanlar (Alexa, Siri) web'de de kullanılmaya başlandı. Erişilebilirlik açısından değerli.

Gesture navigation: kaydırma hareketleri ile navigasyon. Mobilde yaygın: sağa kaydır geri git, sola kaydır ileri git. Web'de henüz standart değil, PWA'lerde (Progressive Web App) kullanılıyor.

AI-powered navigation: kullanıcı davranışına göre menü kişiselleşir. Sık ziyaret edilen sayfalar öne çıkar, az kullanılan linkler gizlenir. Machine learning ile tercihler öğrenilir.

Contextual navigation: sayfa içeriğine göre menü değişir. Blog yazısında ilgili kategoriler vurgulanır. Ürün sayfasında ilgili ürünler menüde gösterilir. Dinamik, akıllı navigasyon.

Minimalist trend: daha az link, daha fazla boşluk. Aşırı basitleştirme: sadece logo + hamburger. İçerik odaklı, navigasyon ikincil. Dikkat: çok minimal navigasyon kullanıcıyı kayboldurabili.

Kurulum Adımları

Site haritası çıkarın. Tüm sayfaları listeleyin, hiyerarşi belirleyin. Hangi sayfalar üst seviye, hangileri alt seviye?

Önceliklendirin. Analytics verilerine bakın: en çok ziyaret edilen, en çok dönüşüm sağlayan sayfalar menüde olmalı.

Etiketleri belirleyin. Her sayfa için kısa, açıklayıcı etiket. Kullanıcı testleri yapın: anlaşılıyor mu? Belirsiz etiketleri netleştirin.

Sıralayın. Soldan sağa önem azalır. En önemli link solda, CTA sağda. Logo solda, menü onun sağında.

Dropdown/mega menü kararı. 7'den fazla öğe varsa gruplandırma gerekir. Dropdown basit, mega menü zengin içerik için. Mobil davranışı düşünün.

HTML/CSS kodlayın. Semantik HTML: <nav>, <ul>, <li>. Flexbox veya grid ile layout. Responsive: media query, hamburger menü.

JavaScript ekleyin. Dropdown açma/kapama, hamburger toggle, sticky davranış. Event listener, class toggle. Erişilebilirlik: ARIA güncelleme, klavye navigasyonu.

Test edin. Tarayıcı uyumluluğu, responsive davranış, erişilebilirlik, performans. Gerçek cihazlarda test, otomatik araçlar + manuel test.

Canlıya alın. Analytics entegrasyonu, event tracking. İlk hafta yakından izleyin: kullanıcılar menüyü kullanıyor mu?

İyileştirin. Heatmap, session recording, kullanıcı geri bildirimi. A/B test, optimizasyon. Navigasyon sürekli evrim geçirir.