Kenar menü sidebar

bilinen diğer adları sidebar · yan menü · çekmece (mobilde) · navigation rail

Böyle diyorsan: "soldaki menü sütunu" · "yandan açılan panel" → bunun adı kenar menü.

Sol/sağ kenarda duran dikey gezinme sütunu; daraltılabilir olabilir.

Kenar menü, çok sayıda bölümü dikeyde gruplayarak gösteren gezinmedir; yönetim panellerinin doğal çözümüdür çünkü üst çubuğun yatay genişliği belirli bir sayıdan sonra biter. Asıl tasarım kararı derinliktedir: iki seviye çoğu ürün için yeterlidir, üçüncü seviye açılır açılmaz kullanıcı nerede olduğunu kaybeder ve menü kendi başına bir labirente döner. Mobilde ise kenar menü bir çekmeceye dönüşür ve o anda kip pencere kurallarına tabi olur — arka plan devre dışı kalmalı, odak içeride tuzaklanmalı, kapanınca odak tetiğe dönmelidir.

Kapsam: Bu madde dikey gezinme panelini kapsar. Onu açan ikon Hamburger, sayfanın üst şeridi Üst Çubuk maddesindedir. Panel içindeki katlanır gruplar akordeon davranışı gösterir ama gezinme bağlamında kalır.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı

Aşama aşama gezmek için okları ya da numaraları kullan.

YAPIM PROMPTU — AJANINA YAPIŞTIR

Solda sidebar kur: dikey menü, aktif sayfa dolu renkle ve aria-current ile işaretli; masaüstünde daraltılabilir (ikon modu), mobilde hamburgerle açılan çekmeceye dönüşsün; uzun menü kendi içinde kaydırılsın; ana içerik alanı sidebar genişliğine esneyerek uyum sağlasın.

DEBUG PROMPTU — HUYSUZLANIRSA

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

Sidebar'ım huysuz; şu klasikleri sırayla ele: (1) aktif madde URL ile senkron değil — sayfa değişiyor, vurgu eski maddede kalıyor; (2) mobilde içerik üstüne açılıyor ama kapatma yolu yok (dışa-tıkla/ESC eksik); (3) daraltınca ikonlar etiketsiz kalıyor, hiçbiri anlaşılmıyor (tooltip yok); (4) menü uzayınca taşıyor — kendi overflow'u tanımsız; (5) sidebar daralınca ana içerik esnemiyor, ölü boşluk kalıyor. Belirti şu:

ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)

1Menü sütunu<aside> / <nav>
Dikey gezinme listesinin evi; sayfanın kalıcı sol (bazen sağ) şeridi.
2Aktif madde vurgusuaria-current="page"
Hangi sayfadasın sorusunun cevabı: renkli/dolu tek madde. URL ile hep senkron olmalı.
3İçerik alanımain
Menünün yönettiği asıl bölge; sidebar daralınca bu alan genişler.
4Daraltma davranışıcollapse / drawer
Masaüstünde ikon-moduna daralma, mobilde çekmeceye (drawer) dönüşme — aynı menünün iki hâli.

DURUMLAR — HANGİ HÂLDE NE OLUR

AAçıkgeniş ekran
Menü sürekli görünür. Masaüstünde varsayılan bu olmalı; yer varken gizlemek kullanımı sebepsiz düşürür.
BDaraltılmışyalnız ikonlar
Yer kazanmak için metinler gizlenir. İkonlar tek başına anlaşılmaz; ipucu balonu ekle ve erişilebilir adları koru.
CMobil çekmeceüstte açılır + inert
Dar ekranda içeriğin üstüne gelir. Bu hâlde kip pencere kurallarına uyar: arka plan inert, odak içeride, Escape kapatır.
DAktif maddearia-current="page"
Bulunulan bölüm işaretli. Uzun listelerde aktif maddenin görünür alana kaydırılması da beklenir.
EGrup katlanmışaria-expanded
Alt maddeler gizli. Aktif sayfa katlanmış bir grubun içindeyse o grup açık gelmelidir, yoksa kullanıcı kendini kaybeder.

KODDAKİ ADLARI

HTML	<aside> + <nav>	anlamsal iskelet
ARIA	aria-current="page"	aktif madde işareti
shadcn/ui	Sidebar	daraltma + mobil çekmece hazır
HTML	inert (mobil çekmece açıkken)	arka planı klavyeye kapatır

ERİŞİLEBİLİRLİK & SIK HATA

<nav> içine al ve ad ver (aria-label="Bölümler"); sayfada birden çok gezinme varsa ekran okuyucu hangisinde olduğunu söyleyebilmeli.
Mobil çekmece açıkken arka planı inert yap. Aksi hâlde Tab tuşu görünmeyen içerik arasında gezinir — en sık atlanan mobil menü hatasıdır.
Daraltılmış hâlde ikonların erişilebilir adı kaybolmasın; görsel metni gizlemek başka, adı silmek başkadır.
Aktif maddeyi aria-current ile işaretle ve katlanmış grubun içindeyse grubu açık getir.
Klavye sırası görsel sırayla aynı olsun (WCAG 2.4.3); CSS ile yer değiştiren menü öğeleri odak sırasını bozar.

SIK KARIŞTIRILANLAR

Üst çubuktan farkı. Kenar menü DİKEY ve derindir, çok sayıda bölümü gruplayarak taşır; üst çubuk YATAY ve sığdır, az sayıda üst düzey bağlantı gösterir. Yönetim panelinde kenar menü, pazarlama sitesinde üst çubuk doğaldır. Otuz bağlantıyı üst çubuğa sığdırmaya çalışmak iç içe açılır menüler doğurur; asıl cevap kenar menüdür.

Üst çubuk sayfasına git →

Açılır menüden farkı. Kenar menü kalıcıdır ve YAPIYI gösterir — kullanıcı sitenin bölümlerini bir arada görür; açılır menü geçicidir ve EYLEM ya da alt seçenek sunar. Kenar menüyü tamamen açılır menülere gömerseniz kullanıcı hiçbir zaman ürünün bütününü göremez, her seferinde tıklayıp hatırlamak zorunda kalır.

Açılır menü sayfasına git →

KAYNAKLAR

standartMDN — <nav> elementi ↗
Gezinme bölgesi ve adlandırma.
standartMDN — inert özniteliği ↗
Çekmece açıkken arka planı klavyeye ve okuyucuya kapatmanın yolu.
standartW3C — WCAG 2.2, Focus Order (2.4.3) ↗
Odak sırasının anlamlı ve görsel sırayla tutarlı olması şartı.

İLGİLİ PARÇALAR

Üst çubuk navbar / header Hamburger menü hamburger menu Açılır menü dropdown Kip pencere modal / dialog

AYNI AİLEDE · GEZINME