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

← UI Sözlüğü

Açılır menü dropdown

bilinen diğer adları dropdown · dropdown menu · üç nokta menüsü · context menu

Böyle diyorsan: "tıklayınca aşağı açılan liste" · "avatara basınca çıkan menü" → bunun adı açılır menü.

Bir tetiğe tıklayınca altında beliren seçenek listesi.

Açılır menü, bir düğmeye basınca beliren ve EYLEM listeleyen küçük panellerdir: Düzenle, Kopyala, Sil. Seçim kutusuyla karıştırılır ama işleri terstir — menüden bir şey seçmek bir işi hemen yapar, seçim kutusundan bir şey seçmek bir değeri belirler ve o değer formla gider. İkinci ayrım hover ile ilgilidir: hover ile açılan menüler dokunmatik cihazlarda çalışmaz ve fareyle bile kullanıcıyı kovalamacaya sokar; menü TIKLAMAYLA açılmalıdır. Üçüncüsü konumdur: menü ekranın kenarına yakınsa dışarı taşar, o yüzden yön çevirme (kenara göre yukarı/sola açılma) bir süs değil zorunluluktur.

Kapsam: Bu madde eylem listeleyen küçük menüyü kapsar. Formda değer seçtiren kontrol Seçim Kutusu, sayfanın ana gezinmesi Üst Çubuk ve Kenar Menü maddelerindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
ProfilAyarlarÇıkış
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Sağ üstteki avatara dropdown bağla: tıklayınca altında Profil / Ayarlar / ayraç / Çıkış (kırmızı) paneli açılsın; dışa tıklama, ESC ve madde seçimi kapatsın; panel ekran kenarına taşacaksa yönünü çevirsin; aria-haspopup/aria-expanded doğru güncellensin; dokunmatikte hover'a değil tıklamaya çalışsın.
DEBUG PROMPTU — HUYSUZLANIRSA

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

Dropdown'um huysuz; klasikleri sırayla ele: (1) dışa tıklayınca kapanmıyor (document dinleyicisi yok/yanlış); (2) sağ kenarda panel ekran dışına taşıyor (yön çevirme yok); (3) ESC kapatmıyor; (4) hover ile açılıyor — dokunmatikte hiç açılamıyor; (5) panel navbar'ın z-index'i altında eziliyor; (6) 'Çıkış' sıradan maddelerle aynı görünüyor, yanlışlıkla tıklanıyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Tetikaria-haspopup + aria-expanded

    Menüyü açan buton/avatar; ▾ oku 'altımda liste var' der, açılınca ▴ olur.

  • 2Panelrole="menu"

    Tetiğin altında beliren liste; ekran kenarına sığmazsa YÖN değiştirmeli (yukarı/sola açılma).

  • 3Yıkıcı maddeayrım çizgisi + kırmızı

    Çıkış/Sil gibi maddeler ayraçla ayrılır ve kırmızı yazılır — yanlışlıkla tıklanmayı zorlaştırır.

  • 4Kapanma yollarıdışa tıkla / ESC / seçim

    Üç kapanış: dışarı tıklama, ESC ve madde seçimi. Üçünden biri eksikse menü 'yapışkan' hissettirir.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AKapalıaria-expanded="false"

    Yalnız tetik görünür. Üç nokta ikonu kullanılıyorsa erişilebilir adı olmalı — 'daha fazla' bir ad değildir, 'Sipariş işlemleri' addır.

  • BAçıkaria-expanded="true"

    Liste görünür. Açılır açılmaz odak ilk maddeye gider; klavye kullanıcısı menüyü açıp içine giremiyorsa menü yok demektir.

  • CKlavye gezinmeok tuşları + Escape

    Oklar maddeler arasında gezer, Enter seçer, Escape kapatır ve odak tetiğe döner. Harfe basınca o harfle başlayan maddeye atlama da beklenir.

  • DYön çevirdikenara göre konum

    Ekran kenarına yakınsa yukarı ya da sola açılır. Bu hesaplanmazsa menü ekran dışında kalır ve kullanıcı hiç göremez.

  • EYıkıcı maddeayrı grup + renk

    'Sil' diğerlerinden ayrılır: ayraçla gruplanır, kırmızı yazılır ve tercihen bir onay ister. Listenin ortasında sıradan bir madde gibi durmamalı.

KODDAKİ ADLARI
ARIAaria-haspopup + role="menu"erişilebilir desen
HTMLpopover attributeyerleşik aç/kapa + dışa-tıkla
shadcn/uiDropdownMenuyön çevirme + klavye hazır
ERİŞİLEBİLİRLİK & SIK HATA
  • APG'nin menü düğmesi kalıbını uygula: tetikte aria-haspopup ve aria-expanded, açılınca odağın menüye taşınması, Escape ile kapanıp odağın tetiğe dönmesi.
  • Hover ile açma. Dokunmatikte hover yoktur ve fareyle bile menü kullanıcıyı kovalamacaya sokar; tıklamayla aç.
  • Üç nokta ikonuna gerçek bir ad ver; neye ait olduğu belirsiz bir 'daha fazla' düğmesi, listede yirmi tane varsa ekran okuyucuda yirmi aynı düğme demektir.
  • Menü maddelerinin dokunma hedefi yeterli olsun ve yıkıcı maddeyi diğerlerinden ayır — yanlış tıklama en çok burada canını yakar.
  • Menü ekran dışına taşmasın; yön çevirmeyi hesapla, aksi hâlde bazı kullanıcılar maddeleri hiç göremez.
SIK KARIŞTIRILANLAR

Seçim kutusundan farkı. Açılır menü EYLEM listeler ve seçilen şey hemen çalışır; seçim kutusu DEĞER tutar ve o değer formla birlikte gider. Görünüşleri neredeyse aynıdır, sözleşmeleri terstir. Karıştırıldığında ortaya 'Sil'i seçip Kaydet'e basmayı bekleyen bir kullanıcı çıkar — ya da tam tersi, formu doldurduğunu sanırken işlem yapmış olur.

Seçim kutusu sayfasına git →

İpucu balonundan farkı. Açılır menü ODAK ALIR ve içinde tıklanacak şeyler vardır; ipucu balonu yalnız açıklar ve odak almaz. İçine buton ya da link koyduğun anda o şey artık ipucu değildir: klavyeyle erişilebilir olmalı, odak yönetimi gerektirir ve hover ile açılıp kapanamaz.

İpucu balonu sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Seçim kutusu selectİpucu balonu tooltipKenar menü sidebarÜst çubuk navbar / header

AYNI AİLEDE · GEZINME