Navigasyon Tasarım Örüntüleri: Web ve Mobil için 9 Menü Düzeni

Navigasyon bir menü değildir. Şeylerin nerede yaşadığına dair bir sözdür. Çalıştığında kullanıcılar bir ürün içinde düşünmeden hareket eder. Başarısız olduğunda terk ederler.

Kullanıcılar navigasyonu okumaz. Tarar, güvenir ve yalnızca başarısız olduğunda fark eder.

Gerçek tasarım problemi budur. Navigasyon kutlanacak bir özellik değil, görünmez kılınacak bir altyapıdır. Bilgi mimarinize veya kullanıcınızın bağlamına yanlış örüntüyü seçmek bir zincirleme reaksiyonu tetikler: insanlar bölümleri bulamaz, kendilerini yönlendiremez ve ürününüzün nasıl çalıştığına dair hiçbir zaman zihinsel bir model kuramaz.

Dokuz örüntü neredeyse her durumu kapsar. Aşağıdakiler her birinin doğrudan bir dökümüdür: neyde iyidir, nerede kırılır ve ne zaman başvurulur.

---

Navigasyon aslında ne için

Navigasyon kullanıcıya tek bir soruyu yanıtlar: buradan nereye gidebilirim? Bunu net yanıtlarsanız hareket ederler. Avlatırsanız terk ederler.

Navigasyonun yapısal görevi, bilgi mimarinizi kullanıcıların güvenebileceği bir sistem olarak temsil etmektir. Bu tutarlılık, istikrar ve üründe gerçekte ne olduğunun dürüst bir yansıması anlamına gelir. Sayfalar arasında değişen, URL'lerden farklı etiketler gösteren ya da birincil yolları ikincil olanların altına gömen navigasyon, açılır menü animasyonu ne kadar parlak olursa olsun bir tasarım başarısızlığıdır. Amazon'un yüz milyonlarca ürün genelinde her sayfada aynı birincil navigasyonu korumasının nedeni tam olarak budur.

Pratik çıkarım şudur: bir navigasyon örüntüsünü iki girdiye göre seçersiniz. Bilgi mimarinizin ne kadar derin ve geniş olduğu ve insanların ürünü hangi bağlamda kullandığı. Görsel stil, animasyon, renk gibi her şey bu iki karardan türer.

---

Üst navigasyon çubuğu

Yatay üst çubuğun web'in varsayılanı olmasının bir nedeni var. Masaüstü ölçeğinde başlık genelinde yaklaşık beş ila yedi birincil bölümü sığdırır, bunları her zaman görünür tutar ve insanların okuma biçimini yansıtır: soldan sağa, yukarıdan aşağıya.

Neon (neon.tech) bunun temiz bir versiyonunu çalıştırıyor. Sol tarafta kelime markası, ortada birincil navigasyon bağlantıları, sağda oturum açma ve bir CTA düğmesi. Gizlenmiş hiçbir şey yok, iç içe geçmiş hiçbir şey yok, bilişsel yük yok. En iyi halinde bir üst çubuk, herhangi bir etkileşim gerektirmeden tek bir satırda bir sitenin tüm yapı hikayesini anlatır.

Başarısızlık modu tıkıştırmaktır. Dokuz bağlantı, iki açılır menü, bir yardımcı program menüsü ve bir arama simgesi içeren üst çubuk bir navigasyon örüntüsü değil, bir panik atağıdır. Örüntünün, yeniden yapılandırmaya ihtiyaç duymadan önce yaklaşık altı veya yedi öğe gibi katı bir tavanı vardır.

Üst çubuklar ayrıca planlanmış bir mobil yedek gerektirir. Küçük ekranlarda yatay düzenin gidecek yeri yoktur. Tasarım aşamasında küçük görünüm alanı deneyiminin ne olacağına karar vermezseniz, sonradan bir hamburger menüsü eklemek zorunda kalırsınız ve bu da yeni sorunlar yaratır.

---

Hamburger menü

Hamburger menü (üç yığılmış çizgi, dokunuşta bir çekmece veya katman açar) navigasyonu bir ekstra etkileşimin arkasına gizler. Ekran alanından tasarruf sağlar. Aynı zamanda ürününüzün her bölümünü daha az keşfedilebilir hale getirir.

Bu konudaki araştırmalar belirsiz değil. NNGroup, mobilde sekmeli navigasyonun keşfedilebilirlik ve görev tamamlama oranlarında hamburger menülerini sürekli olarak geçtiğini buldu. Navigasyonu gizlediğinizde insanlar onu daha az kullanır. Hamburger'in arkasındaki öğeler görsel olarak daha düşük öncelikli görünür, çünkü gerçekten öyledirler.

Bu hamburger'ı yanlış yapmaz. Onu bir takas haline getirir. Derin, nadiren erişilen bölümleri olan siteler için bu takas kabul edilebilir. İnsanların her gün açtığı uygulamalar için genellikle bir hatadır.

Instagram birincil navigasyonu hamburger'ın arkasına koymayı denedi ve bundan vazgeçerek temel bölümleri bunun yerine bir alt sekme çubuğuna taşıdı. Ders açık: hamburger'ı ikincil yollar, ayarlar ve seyrek ziyaret edilen hedefler için kullanın. Birinin ürünü neden açtığını tanımlayan eylemler için asla kullanmayın.

---

Kalıcı kenar çubuğu

Kalıcı kenar çubuğu, tam bir navigasyon sütununu ekranın soluna sabitler ve kullanıcı içeriği kaydırırken görünür kalır. Panolar, tasarım araçları ve derin dokümantasyon için baskın örüntüdür çünkü uzamsal kalıcılık özelliğin kendisidir.

Tailwind CSS dokümanları bunu tam doğru kullanıyor. Sol kenar çubuğu, kalan genişliği içeriğin kapladığı dokümantasyonun her bölümünü gruplar halinde ve kaydırılabilir şekilde tutuyor. Kullanıcılar her zaman nerede olduklarını, nereye gidebileceklerini ve tüm bilgi alanının nasıl organize edildiğini bilir. Bu uzamsal farkındalık, insanların sürekli bölümler arasında atladığı derin referans materyallerinde tüm amacı oluşturur.

Slack, Notion ve Figma'nın hepsi uygulama ölçeğinde kalıcı kenar çubukları kullanır, aynı nedenden ötürü. Kenar çubuğu harittir. Onu kaldırmak, kullanıcıların her navigasyon eyleminde bu zihinsel modeli yeniden oluşturması anlamına gelir ve bu ödememeleri gereken bir maliyettir.

Maliyet yatay ekran alanıdır. 13 inçlik bir dizüstü bilgisayarda kalıcı kenar çubuğu, içerik alanınızın 250 ila 300 pikselini kullanır. Mobilde ise bunun için hiç yer yoktur.

Duyarlı kenar çubukları küçük ekranlarda bir çekmece veya hamburger'a katlanır ve kaçınmaya çalıştığınız aynı keşfedilebilirlik sorunlarını yeniden ortaya çıkarır. Başlangıçta bir nav'ı tutarlı tutan token'lara bağlayın, yoksa daha sonra yama yapıyor olacaksınız.

---

Alt sekme çubuğu

Alt sekme çubuğu, üç ila beş simgeyi bir mobil ekranın altına, doğrudan parmak bölgesine sabitler. Native mobil uygulamalar için standarttır ve 2026 itibarıyla, insanların telefonlarında her gün açtığı her web ürünü için varsayılandır.

Instagram, Spotify ve YouTube'un hepsi birincil mobil navigasyonları için bu örüntüyü kullanıyor. Bunlar tesadüf değil. Alt çubuk, bir telefonun ekranının üst kısmının tek elimle ulaşmak için en zor alan olması ve navigasyona sürekli dokunulması nedeniyle var olur. Birincil hedefleri alta taşımak, binlerce günlük oturum boyunca biriken fiziksel çabayı azaltır.

Beş öğe katı tavandır. Beşin ötesinde simgeler küçülür ve etiketler kısaltılır. Ürününüzün beşten fazla birincil bölümü varsa bu, bir navigasyon sorunu kılığına bürünmüş bir bilgi mimarisi sorunudur. Bir örüntü seçmeden önce yeniden yapılandırın.

2026'da alt sekme çubuğu, mobilde günde en az bir kez açılan her ürün için varsayılandır. Bir tüketici mobil ürünü veya mobil öncelikli bir progressive web app tasarlıyorsanız ve alt çubuk kullanmıyorsanız, bunun için belirli bir nedeniniz olması gerekir. "Önce masaüstü için tasarladık" o neden değildir.

---

Mega menü

Mega menü, tek bir üst navigasyon öğesini bağlantılar, kategoriler ve bazen önizleme kutucukları içeren geniş, çok sütunlu bir panele genişletir. Büyük kataloglara ve karmaşık hiyerarşilere sahip siteler için inşa edilmiştir; bunlar kullanılamaz hale gelmeden basit bir açılır menüye sığmaz.

Amazon bunu "All" menüsünün altında aşırı bir versiyonla çalıştırıyor. Sütunlar ve gruplar halinde organize edilmiş, alt kategorilerle birlikte düzinelerce kategori, hepsi tek bir panelde görünür. Örüntü katalog baskısı altında işe yarar çünkü hiyerarşi boyunca birden fazla tıklama gerektirmeden derinliği ortaya çıkarır. Her şey tek bir görünümde taranabilir.

Sorun şu ki mega menüler tasarım gereği yalnızca masaüstü örüntüsüdür. Çok sütunlu açılır panel mobil cihazlara taşınmaz. Bunları kullanan siteler küçük ekranlar için tamamen ayrı bir navigasyon stratejisine ihtiyaç duyar, bu da tasarım ve bakım yüzey alanını ikiye katlar.

Mega menüler sığ sitelerde de başarısız olur. On iki sayfa mega menüyü haklı kılmaz. Örüntü, gelecekteki büyüme konusundaki iyimserlikle değil, gerçek içerik derinliğinizle kazanmanız gereken bir karmaşıklığı ima eder.

---

Breadcrumb'lar

Breadcrumb'lar ana sayfadan geçerli sayfaya giden yolu gösterir: Ana Sayfa > CSS > Grid. Bunlar birincil navigasyon değildir. Yönlendirme navigasyonudur ve kesin bir işlev görürler.

MDN her referans sayfasında breadcrumb kullanıyor. CSS grid dokümantasyonuna bir Google aramasından indiğinizde, breadcrumb izi size bu sayfanın CSS içinde yaşadığını ve bunun da References içinde yaşadığını anında söyler. Bu bağlam, üç seviyeli bir hiyerarşiyi ayrıştırmak için hiçbir etkileşim gerektirmeyen tek bir satıra sıkıştırır.

Breadcrumb'lar düz sitelerde işe yaramaz. Ürününüzün tamamı iki seviye derinlikteyse breadcrumb'lar herhangi bir yönlendirme değeri sağlamadan görsel karmaşa ekler. Dokümantasyon sitelerinde, Ana Sayfa > Erkekler > Ceketler > Su Geçirmez gibi e-ticaret hiyerarşilerinde ve kullanıcıların arama yoluyla sıklıkla derinden indiği her sitede yerlerini kazanırlar.

Diğer örüntüleri değiştirmek yerine onlarla birleşirler. Breadcrumb'lar içeriğin üstüne oturur, bir üst çubuğu veya kenar çubuğunu tamamlar. Daha fazla web ve UI tasarım analizi için aynı mantık geçerlidir: ikincil navigasyon öğeleri birincil örüntüyü desteklemeli, onunla rekabet etmemelidir.

---

Komut paleti

Komut paleti, genellikle Cmd+K veya Ctrl+K ile çağrılan, metin girişini kabul eden ve sıralı eylemler, navigasyon hedefleri ve arama sonuçları döndüren klavye tetiklemeli bir katmandır. Linear, Raycast, Slack ve Figma'nın hepsi onu birinci sınıf bir navigasyon yüzeyi olarak sunar.

2026'da komut paleti, güçlü kullanıcı numarasından ciddi üretkenlik yazılımlarında birincil navigasyon mekanizmasına terfi etti. Linear'in Cmd+K'sı sizi iki saniye içinde herhangi bir soruna, projeye veya çalışma alanı eylemine ulaştırır. Raycast neredeyse tamamen bu örüntü etrafında inşa edilmiştir. Bu ürünler, klavye alışkanlıkları olan insanlar için gerçekten öyle olduğu için, yazılan niyeti herhangi bir menü hiyerarşisinden daha doğrudan bir yol olarak ele alır.

Başarısızlık modu görünmezliktir. Kısayolun varlığından haberdar olmayan kullanıcılar onu keşfetmek için keşif yoluyla asla bulamaz. Komut paletleri ilk kez kullananlar veya klavye öncelikli alışkanlıkları olmayan herkes için görünür navigasyonun yerini alamaz. Tüm navigasyonu Cmd+K'nın arkasına gizleyen ürünler her yeni kullanıcıyı mahsur bırakır.

Doğru kullanım değiştirmek değil, artırmaktır. Kenar çubuğunuzun veya üst çubuğunuzun yanında bir komut paleti çalıştırın. Klavye alışkanlığı olan kullanıcıların menüyü tamamen atlamasına izin verin.

Diğer herkesin görsel olarak gezinmesine izin verin. Her iki yolun da var olması gerekir.

---

Yapışkan ve küçülen başlıklar

Yapışkan başlık, kullanıcı kaydırırken görünüm alanının üstüne sabitlenmiş kalır. Küçülen başlık da aynı şeyi yapar, ancak kullanıcı bir kaydırma eşiğini geçtikten sonra yüksekliğini azaltarak navigasyona erişimi feda etmeden dikey alanı geri kazanır.

Her iki örüntü de uzun sayfalarda navigasyona erişimi sağlar ve başa geri kaydırmayı gerektirmez. İçerik yoğun sayfalarda bu gerçek bir kullanılabilirlik iyileştirmesidir. GitHub, sorunlar, kod ve tartışmalar boyunca kaydırırken birincil navigasyonun, aramanın ve depo bağlamının her zaman görünür olması için depo sayfalarında yapışkan başlık kullanır.

Maliyet dikey ekran alanıdır. 60 ila 70 piksellik yapışkan bir başlık, bu yüksekliği her kaydırma konumundan talep eder. 768 piksel yüksekliğindeki bir tablette bu, navigasyon tarafından kalıcı olarak işgal edilen görünüm alanının yaklaşık yüzde onudur. Küçülen başlıklar kaydırma sonrasında yaklaşık 40 piksele indirgenerek bunun bir kısmını geri kazanır, ancak kasıtlı hissetmek yerine bozulmuş gibi görünmemek için dikkatli uygulama gerektirir.

Kullanıcının hızla alta ulaştığı kısa sayfalarda yapışkan başlıklardan kaçının. Örüntü, en başa dönüşün önemli miktarda kaydırma gerektireceği uzun, içerik yoğun sayfalarda değerini kanıtlar.

---

Şişman footer

Şişman footer, ikincil navigasyon, bağlantı kategorileri, yasal sayfalar ve iletişim bilgilerini içeren geniş, çok sütunlu bir alt bilgidir. Birincil navigasyon değildir. Ana içeriği ihtiyaç duydukları şeyi bulmadan kaydıran kullanıcılar için ikinci bir şanstır.

Tailwind CSS, Stripe ve çoğu SaaS pazarlama sitesi, ürün bağlantılarını, dokümantasyonu, şirket sayfalarını, yasal bilgileri ve sosyal bağlantıları kapsayan dört ila altı sütunlu şişman footer'lar çalıştırır. Ana içerik deneyimi sırasında görünüm alanı yüksekliğine hiçbir maliyet getirmezler ve belirli bir şey arayan, alta ulaşan kullanıcılar için kullanışlı bir harita sağlarlar.

Şişman footer'lar canlı navigasyondan çok SEO açısından önem taşır. Şişman footer'daki her bağlantı taranabilir bir yoldur. Bunlar, arama motorlarının bir sitedeki ikincil ve üçüncül sayfaları keşfetmesinin ana yollarından biridir. Saf kullanılabilirlik perspektifinden bakıldığında, çoğu kullanıcı footer'a asla kaydırmaz, ancak kaydıranlar kasıtlı bir arayış içindedir.

Oturum açılmış ürün deneyimlerinin içindeki şişman footer'ı atlayın. Notion size editörün içinde bir pazarlama footer'ı göstermez. Örüntü, anonim ve yeni kullanıcıların serbestçe gezindiği pazarlama sitelerine ve dokümantasyon merkezlerine aittir.

---

Doğru örüntüyü nasıl seçersiniz

Doğru navigasyon örüntüsü iki girdiden türer: bilgi mimarinizin derinliği ve insanların ürünü kullandığı bağlam. Diğer her şey bu iki faktörün sonucudur.

Örüntüleri birleştirmek normaldir ve beklenen bir durumdur. Çoğu ciddi ürün iki veya üç tane kullanır. Tailwind CSS dokümantasyonu site düzeyinde navigasyon için üst çubuk, dokümanlar navigasyonu için kalıcı kenar çubuğu ve sayfa düzeyinde yönlendirme için breadcrumb'lar kullanır. Bu üç örüntü, navigasyon hiyerarşisinin üç ayrı seviyesini örtüşmeden aynı anda ele alır.

Brainy, tasarımcıların gerçekten gönderilen işler üzerinde daha keskin kararlar vermelerine yardımcı olur. İçerik üreticiler için neler inşa ettiğimize bakın.

---

Sessizce kullanılabilirliği öldüren navigasyon hataları

Birincil eylemleri hamburger menüde gizleme. Kullanıcıların günlük olarak bir özelliğe ihtiyacı varsa, fazladan bir dokunuşun arkasında yaşayamaz. Hamburger'ın kendisindeki tıklama oranını ölçün. Yüzde otuzun altındaysa içindeki yollar kullanıcılarınızın çoğuna görünmezdir.

Yüzeyler arasında tutarsız etiketleme. Panoda "Insights", katılım e-postasında "Reports", yardım dokümanlarında "Analytics"; hepsi aynı hedefe işaret ediyor. Navigasyon bir kelime dağarcığıdır. Her eş anlamlı, kullanıcının zihinsel modelinde bir soru işaretidir.

Geçerli konumda aktif durum yok. Kullanıcıların nerede olduklarını bilmeleri gerekir. Geçerli navigasyon öğesindeki aktif durum, mevcut en temel yönlendirme sinyalidir. Bunu atlamak, kullanıcıları URL'yi okumaya zorlar; bu da ürünün içine tasarladığınız bir başarısızlık modudur.

Sayfa veya bölüme göre değişen navigasyon. Kenar çubuğu kullanıcının hangi bölümde olduğuna göre yeniden düzenleniyorsa, onların kurduğu uzamsal belleği kırdınız. Navigasyon sabit bir harita olmalıdır. Haritanın konuma göre değiştiği ürünler, kullanıcı güveni inşa etmez; yıkar.

Aşırı iç içe geçme kullanımı. Üç seviye derinliğindeki açılır menü neredeyse her zaman kullanıcı arayüzünde yanlış yüzeylenmiş bir bilgi mimarisi sorunudur. Önce yapıyı düzleştirin. İç içe geçmiş menüler taramak için yavaştır, dokunuşta kullanmak imkansızdır ve hover üzerinde açık kalmak için hassas fare kontrolü gerektirir.

Taramak için inşa edilmiş düzen örüntüleri için aynı ilke geçerlidir: yapı ve yönlendirme süslemenin önüne geçer. Yönlendirmeyi başaramayan navigasyon, en iyi ihtimalle süslemedir, en kötü ihtimalle sürtünmedir.

---

SSS

Web'de en yaygın kullanılan navigasyon örüntüsü nedir?

Masaüstü siteleri için en yaygın örüntü yatay üst navigasyon çubuğudur. Mobil uygulamalar ve günlük kullanılan ürünler için alt sekme çubuğu standart haline gelmiştir. Çoğu gerçek ürün her ikisini de kullanır: masaüstünde üst çubuk ve mobilde alt çubuk, tutarlı bir bilgi mimarisi üzerinde.

Hamburger menüyü ne zaman kullanmalıyım?

Hamburger menüyü mobilde birincil bölümler için değil, ikincil veya seyrek kullanılan navigasyon için kullanın. Bir kullanıcının ürününüzün temel işini yapmak için hamburgeri açması gerekiyorsa, mimarinin daha iyi bir simge değil yeniden yapılandırmaya ihtiyacı vardır.

Navigasyon çubuğunda kaç öğe olmalı?

Yatay üst çubuk için beş ila yedi öğe, mobilde alt sekme çubuğu için beş öğe kabul görmüş tavandır. Bu sayıların ötesinde örüntü başarısız olmaya başlar: öğeler sıkışır, etiketler kesilir ve tarama maliyeti getirisinden fazla olur.

Bir sitede birden fazla navigasyon örüntüsü kullanabilir miyim?

Sadece kullanabilirsiniz, kullanmalısınız da. Çoğu gerçek ürün, navigasyon hiyerarşisinin farklı seviyelerini ele alan iki veya üç örüntü kullanır. Dokümantasyon siteleri genellikle site navigasyonu için üst çubuğu, bölüm navigasyonu için kalıcı kenar çubuğunu ve sayfa konumu için breadcrumb'ları birleştirir.

Her örüntü örtüşmeden ayrı bir katmanı yönetir. Hata, işbirliği yapan değil rekabet eden birden fazla örüntü kullanmaktır.

Navigasyon SEO'yu nasıl etkiler?

Üst çubuğunuzdaki, kenar çubuğunuzdaki ve şişman footer'ınızdaki bağlantılar sayfa otoritesi aktarır ve arama motorlarının sayfaları keşfetmesine ve indekslemesine yardımcı olur. Breadcrumb'lar, yol bilgilerini doğrudan arama sonuçlarında yüzeyleyebilen yapılandırılmış veri ekler. Navigasyon, SEO mimarinizin bir parçasıdır ve sonradan eklenmek yerine ilk günden itibaren bu şekilde ele alınmalıdır.

---

İnsanları avlatmayı bırakın

Navigasyon çalıştığında görünmezdir, çalışmadığında sinir bozucudur. Amaç hiçbir zaman güzel bir menü değildir. Amaç, tek bir sürtünme anı yaşamadan gelen, yönlenen, hareket eden ve geri dönen kullanıcılardır.

Dokuz örüntü neredeyse her şeyi kapsar: pazarlama siteleri ve geniş referans için üst çubuk, derin araçlar ve dokümantasyon için kalıcı kenar çubuğu, günlük mobil kullanımı için alt sekme çubuğu, katalog derinliği için mega menü, hiyerarşik yönlendirme için breadcrumb'lar, önce hız isteyen üretkenlik araçları için komut paleti, uzun biçimli içerik için yapışkan başlıklar, ikincil yollar için yedek olarak hamburger ve pazarlama siteleri için ikinci şans haritası olarak şişman footer.

Bilgi mimarisi derinliğine ve kullanım bağlamına göre seçin. Ürününüzde birden fazla navigasyon hiyerarşisi seviyesi varsa iki veya üç örüntüyü katmanlayın. Sessizce birikenlerden kaçının: gizli birincil eylemler, tutarsız etiketler, eksik aktif durumlar, değişen nav yapıları ve aşırı iç içe geçme.

Daha fazla web ve UI tasarım analizi için Brainy Papers'a göz atın veya Brainy içerik üretici topluluğuyla birlikte inşa edin ve temelleri önemseyerek hâlisane çalışan 2M'den fazla tasarımcıyla birlikte ustalığınızı keskinleştirin.