منشئ القوائم المنسدلة بالذكاء الاصطناعي.

صِف عناصرك ويُنشئ MeDo القائمة كاملة — الزرّ المُشغِّل، اللوحة، أقسام مجمّعة بفواصل، قوائم فرعية، تنقّل بالأسهم والكتابة السريعة، إغلاق بـ Escape وبالنقر خارجها، وتركيز يعود إلى الزرّ المُشغِّل عند الإغلاق.

القائمة محطة تنقّل واحدة بمفتاح Tab، وهذا تحديداً ما يُخطئ فيه الناس

الغريزة تدفع لجعل كل عنصر قابلاً للتركيز، فيمرّ Tab عليها واحداً واحداً. لكن نمط ARIA menu يفعل العكس: القائمة كلها محطة تنقّل واحدة، وأسهم لوحة المفاتيح تنقل roving tabindex بين العناصر بينما يغلق Tab القائمة ويخرج منها. هذا ما يجعل تجاوز قائمة حساب بـ 12 عنصراً يكلّف ضغطة واحدة بدلاً من اثنتي عشرة. ويفسّر أيضاً لماذا تحتاج القوائم استعادة صريحة للتركيز: بما أن التركيز نُقل إلى اللوحة برمجياً، فإن الإغلاق دون إعادته إلى الزرّ المُشغِّل يترك مستخدم لوحة المفاتيح في أعلى المستند. إنشاء الزرّ المُشغِّل واللوحة كمكوّن واحد يحفظ رحلة الذهاب والعودة هذه، لأن النصفين مكتوبان وفق العقد ذاته للتركيز.

6 قالبًا

قوالب قائمة منسدلة التي يمكنك توليدها

كل قالب هو طلب حقيقي لا صورة. انسخه إلى أي محرّر ذكاء اصطناعي، أو شغّله في MeDo لتحصل على كود React و Tailwind مباشرة.

BasicAccount Menu

Avatar Trigger With Grouped Actions

The top-right menu every product has. Get the focus round trip right here and the rest of your menus inherit it — closing without returning focus drops keyboard users at the top of the document.

Create an account dropdown menu: a 32px avatar trigger with aria-haspopup="menu" and aria-expanded, and a 240px panel with role="menu" anchored 6px below it. Each row is role="menuitem", 32px tall, with a 16px leading icon. Use a roving tabindex so the whole menu is one tab stop — Tab closes it and leaves rather than walking the items. Enter, Space or Arrow Down opens the menu and focuses the first item; Arrow Up opens it focusing the last. Arrow Down and Up cycle with wrapping, Home and End jump to the ends, typing a letter jumps to the next item starting with it, Escape and outside pointerdown close it, and focus returns to the trigger on every close path. Group items with 1px dividers and style Sign out as a destructive red item in its own group.

جرّبه في MeDo

Table rowRow Overflow

Three-Dot Menu on a Table Row

Repeated once per row, which makes the trigger label the real problem: twenty buttons all called "More options" tell a screen reader user nothing about which record they are about to delete.

Create a row-level overflow menu for a data table: a 32px icon-only three-dot trigger with aria-haspopup="menu", aria-expanded, and an accessible name that names its record — "More actions for invoice 1042" — so repeated triggers are distinguishable. The panel is role="menu" with Edit, Duplicate and Export, then a divider and a destructive Delete that opens a confirmation dialog and moves focus into it rather than acting immediately. Roving tabindex, Arrow Up and Down with wrapping, Home and End, single-letter type-ahead, Escape and outside pointerdown to close, focus back to the trigger. Close the menu when its ancestor scroll container scrolls, since an anchored panel detaches from a row that has moved.

جرّبه في MeDo

NestedSubmenu

Parent Items With Nested Panels

One level of nesting, with a hover intent delay. Without the delay, dragging the pointer diagonally to the item you wanted opens and closes three submenus on the way there.

Create a dropdown menu with one level of submenus: the parent item carries aria-haspopup="menu", aria-expanded and a trailing chevron, and its child panel is a separate role="menu" anchored to the parent's right edge, flipping to the left when it would leave the viewport. Open the submenu on Arrow Right or Enter with focus on the first child, and on hover after a 150ms intent delay with a similar grace period before closing so a diagonal pointer path does not toggle three panels. Arrow Left closes the submenu and returns focus to the parent item; Escape closes the whole menu and focuses the trigger. Keep type-ahead scoped to the currently open panel, and do not nest a second level.

جرّبه في MeDo

TogglesCheckable Items

Menu With Checkbox and Radio Rows

View options and sort order inside a menu. The roles change with the semantics — menuitemcheckbox for independent toggles, menuitemradio in a group for one-of-many — and so does whether the panel closes on select.

Create a view-options dropdown mixing checkable rows: a group of role="menuitemcheckbox" rows with aria-checked for column visibility, and below a divider a group of role="menuitemradio" rows inside role="group" with aria-labelledby a Sort by heading, where exactly one is aria-checked. Keep the panel open when a checkbox row is toggled so several can be set in one pass, and close it after a radio selection since the choice is complete. Reserve the check indicator column at a fixed width so labels do not shift when a state changes. Roving tabindex, Arrow Up and Down with wrapping, Home and End, Space toggles without closing, Enter selects, Escape closes and returns focus to the trigger.

جرّبه في MeDo

NavigationNav Disclosure

Header Dropdown of Plain Links

Deliberately not a menu. A products dropdown holds links, so role="menu" would collapse them into one tab stop and stop cmd+click from opening a new tab.

Create a navigation dropdown for a marketing header that is a disclosure, not an ARIA menu: a trigger button with aria-expanded and aria-controls, and a panel containing a plain ul of anchor elements — no role="menu" or role="menuitem", so each link stays individually focusable and openable in a new tab with cmd+click or middle click. Tab moves through the links in order rather than a roving tabindex. Open on click and on Arrow Down, close on Escape with focus returning to the trigger, close on outside pointerdown, and close on focusout when focus leaves the panel entirely. Do not open on hover alone on touch devices. Mark the link matching the current route with aria-current="page".

جرّبه في MeDo

FilterableSearch Menu

Long Menu With a Filter Field

Past roughly fifteen items, single-letter type-ahead stops being enough. Adding a text field changes the contract: the field keeps focus and the highlight moves by aria-activedescendant.

Create a filterable dropdown for a long list: a trigger with aria-haspopup and aria-expanded, and a panel whose first element is a search input that receives focus on open. Because a text field now holds focus, switch from a roving tabindex to the combobox approach — role="listbox" on the list, role="option" on rows, and aria-activedescendant on the input so Arrow Up and Down move the highlight while typing keeps working. Filter as the user types with a 150ms debounce, bold the matched substring, cap the list at 280px with internal scroll, and scroll the active option into view with block nearest. Show a no-matches row rather than an empty panel. Escape clears a non-empty filter first, then closes on a second press with focus returning to the trigger.

جرّبه في MeDo

كيف تخصّص قائمة منسدلة الخاص بك

أوضِح أنها قائمة أوامر وليست <select>

يخبر role="menu" التقنيات المساعدة بأن كل عنصر ينفّذ أمراً. أما إذا كانت العناصر تضبط قيمة في نموذج، فاطلب listbox أو <select> أصلياً. استخدام قائمة أوامر لحقل نموذج يجعل قارئات الشاشة تُعلن أوامر في موضع يتوقع فيه المستخدم خيارات.

حدّد تأخير نيّة التمرير للقوائم الفرعية

اطلب نحو 150ms من التأخير قبل فتح القائمة الفرعية ومهلة سماح مماثلة قبل إغلاقها. من دونها، سحب المؤشر بشكل مائل عبر القائمة الأصلية يفتح ويغلق ثلاث قوائم فرعية في الطريق إلى التي أردتها.

اطلب صراحةً تحديد موضع يتجنّب حدود الشاشة

قل إن اللوحة يجب أن تنقلب فوق الزرّ المُشغِّل قرب الحد السفلي وأن تنزلق أفقياً لتبقى ظاهرة. القائمة المثبّتة بصورة رمزية في الزاوية العلوية اليمنى هي الحالة الأكثر شيوعاً التي يجعل فيها الإزاحة الثابتة نصف العناصر يُعرض خارج الشاشة.

افصل العنصر التدميري

ضع إجراءات مثل تسجيل الخروج أو الحذف أو إلغاء الوصول في مجموعة خاصة أسفل فاصل واطلب معالجة اللون التدميري. ما يمنع النقر الخاطئ هو المسافة الفعلية عن العناصر الروتينية، لا النص الأحمر.

من يستخدم مكوّن قائمة منسدلة

منتج SaaS

قائمة صورة رمزية في الأعلى يميناً مع بريد الحساب كصف ترويسة ثابت، ثم روابط الملف الشخصي والفواتير، وقائمة فرعية للفريق، ومفتاح تبديل المظهر، وتسجيل الخروج معزول أسفل فاصل.

لوحة تحكم أو أداة إدارة

قائمة إضافية على مستوى الصف خلف زرّ بثلاث نقاط، تحتوي تعديل ونسخ وتصدير وحذف تدميري، مع تسمية الزرّ المُشغِّل بالصف الذي يتبعه حتى تُعلن قارئات الشاشة أي سجل يجري التعامل معه.

محرّر محتوى

قائمة إدراج كتل بأنواع عناصر مجمّعة، وقائمة فرعية لمزوّدي التضمين، وقفز بالحرف عبر الكتابة السريعة حتى يصل من يعرف القائمة إلى عنصره دون التنقّل بالأسهم.

تنقّل موقع تسويقي

قائمة منسدلة للمنتجات في شريط التنقّل مبنية من قائمة روابط عادية بدلاً من role="menu"، لتتصرّف اللوحة كتنقّل فعلي وتبقى الروابط قابلة للتركيز فردياً وللفتح في تبويب جديد.

أنماط قائمة منسدلة لمواقع مختلفة

المكوّن قائمة منسدلة نفسه، مُهيّأ لنوع الموقع الذي يُنشر عليه.

01 / 06

SaaS Account Menu

Avatar trigger, the account email as a static non-focusable header row, then profile and billing links, a team submenu and Sign out below a divider. Keep the email row out of the roving tabindex — a label that takes an arrow keypress to skip reads as a broken menu item.

أنماط قائمة منسدلة وتنويعاته

اختر التنويعة التي تناسب بقية الصفحة، ثم ولّدها.

01 / 06

Grouped Action Menu

Rows split into two or three sections by 1px dividers, with the destructive action alone at the bottom. The physical gap is what prevents the misclick on Sign out or Delete — red text alone does not, because the pointer is already moving before the color registers.

قائمة منسدلة في React و Next.js و Vue و Svelte

React و Next.js و Vue 3 و SvelteKit و Astro أو HTML صِرف — المكوّن قائمة منسدلة نفسه بست طرق للإضافة.

01 / 06

React Dropdown Menu

Hold the active index in state and derive tabIndex from it — that is the roving tabindex. Keep a ref to the trigger and focus it in the close handler, since the browser will not restore focus for you.

src/components/Menu.tsx

const [open, setOpen] = useState(false)
const [active, setActive] = useState(0)
const triggerRef = useRef(null)

function close() {
  setOpen(false)
  triggerRef.current?.focus()
}

<button ref={triggerRef} aria-haspopup="menu" aria-expanded={open}>
  Account
</button>

كيف تضيف قائمة منسدلة إلى مشروعك

أربع خطوات، من اختيار قالب قائمة منسدلة إلى إطلاقه في الإنتاج.

01~30s

Pick a Menu Template

Answer one question first: do the items run commands or navigate? Actions get the menu templates and their roving tabindex; links get the navigation disclosure, where every anchor stays its own tab stop.

02~10s

Copy the Prompt

Take the prompt into MeDo, Lovable, Bolt, v0 or Cursor and list your real items with the dividers where you want them. Say which item is destructive and which opens a submenu, since both change the generated markup.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "add a filter field", "flip above the trigger near the bottom edge", "turn Sort into radio items" — instead of touching the keydown handler.

04~2min

Wire the Actions and Ship

Connect each item to its handler, then verify the focus round trip with the keyboard alone: open, arrow down, Escape, and confirm focus lands back on the trigger rather than the top of the page.

أسئلة شائعة حول قائمة منسدلة

كيف أُنشئ قائمة منسدلة بالذكاء الاصطناعي؟

اذكر العناصر التي تريدها، وحدّد أيها يفتح قوائم فرعية، وقل أين تقع الفواصل. يُنشئ MeDo الزرّ المُشغِّل واللوحة المثبّتة والعناصر المجمّعة ومعالجة لوحة المفاتيح كمكوّن واحد، فتكون الأسهم و Escape والنقر الخارجي واستعادة التركيز موصولة قبل أن تفتحها للمرة الأولى.

ما الفرق بين القائمة المنسدلة و<select>؟

القائمة تُنفّذ أوامر، فاختيار عنصر يفعل شيئاً فوراً ولا يُخزَّن شيء. أما <select> فيحمل قيمة نموذج، فاختيار خيار يغيّر حالة تُرسل لاحقاً. يستخدمان أدواراً مختلفة وعقوداً مختلفة للوحة المفاتيح، واستبدال أحدهما بالآخر هو أشيع خلل في إمكانية الوصول في القوائم المنسدلة المخصّصة.

هل يجب أن تستخدم قائمة التنقّل المنسدلة role="menu"؟

لا. role="menu" مخصّص لقوائم الأوامر بأسلوب التطبيقات، وتطبيقه على قائمة روابط يجعل كل رابط يُعلَن كـ menuitem ويضغطها كلها في محطة تنقّل واحدة. قائمة التنقّل المنسدلة ينبغي أن تكون قائمة روابط عادية داخل عنصر إظهار يبدّله الزرّ المُشغِّل عبر aria-expanded. أخبر MeDo أن اللوحة للتنقّل وسيُنشئ روابط لا عناصر قائمة أوامر.

كيف ينبغي أن يعمل التنقّل بلوحة المفاتيح في قائمة منسدلة؟

يفتح Enter أو Space أو Arrow Down القائمة ويضع التركيز على العنصر الأول. ينقل Arrow Up و Down بين العناصر ويلتفّان عند الأطراف، ويقفز Home و End إلى الأول والأخير، وكتابة حرف تنقل إلى العنصر التالي الذي يبدأ بذلك الحرف. يفتح Arrow Right قائمة فرعية ويغلقها Arrow Left، ويغلق Escape أو Tab القائمة بأكملها مع عودة التركيز إلى الزرّ المُشغِّل.

هل يمكن للذكاء الاصطناعي إنشاء قائمة منسدلة بقوائم فرعية؟

نعم. صِف التداخل ويُنشئ MeDo العنصر الأصل مع aria-haspopup، واللوحة الفرعية، وتأخير نيّة التمرير، وارتباطات Arrow Right و Arrow Left. أبقِ التداخل بمستوى واحد قدر الإمكان، فالمستوى الثاني يصعب إصابته بالمؤشر ويصعب وصفه لمستخدم قارئ الشاشة.

هل يجب أن تُغلق القائمة المنسدلة عند النقر خارجها؟

نعم، وينبغي أن تُغلق أيضاً بـ Escape، وعند تمرير حاوية أعلى منها، وعند النقر على الزرّ المُشغِّل مرة أخرى. اربط المستمع الخارجي بـ pointerdown بدلاً من click حتى يُغلقها سحب يبدأ خارج اللوحة، وأعِد التركيز دائماً إلى الزرّ المُشغِّل حتى لا يُترك مستخدمو لوحة المفاتيح في أعلى الصفحة.

بناء قائمة منسدلة الخاص بك الآن.

جرّب أي أمر — مجاني وبدون تسجيل.

ابدأ البناء مجاناً عرض الأسعار

شريط التنقل

صِف موقعك واحصل على شريط تنقل متجاوب بالكامل — بشعار وروابط تنقل وقوائم منسدلة وقائمة هامبرغر للجوال — مُولَّد من موجّه واحد. بدون قوالب، بدون تعقيد.

مكونات ذات صلة

الصورة الرمزية

أنشئ صوراً رمزية جاهزة للإنتاج من أمر واحد. 6 أنماط مفتوحة المصدر — صورة، رسم توضيحي بأسلوب Notion، بديل بالأحرف الأولى، شارة حضور، مجموعة متراكبة، أداة رفع — كلها Tailwind + shadcn، متاحة للجميع وقابلة لإعادة التنسيق وبترخيص MIT. انسخ الكود، أو أعد إنشاء أي منها مباشرة في مشروعك على MeDo أو Lovable أو Bolt أو v0 أو Cursor.

مكونات ذات صلة

تلميح الأدوات

صِف التلميح الذي تحتاجه ويُنشئ MeDo السلوك بالكامل — تأخير الفتح والإغلاق، والانقلاب بعيداً عن حدود نافذة العرض، وسهم يبقى موجهاً نحو العنصر المُشغِّل، والتشغيل عبر تركيز لوحة المفاتيح، وربط aria-describedby.

مكونات ذات صلة