Générateur de Menu Déroulant IA.

Décrivez vos éléments et MeDo génère le menu complet — déclencheur, panneau, sections groupées avec séparateurs, sous-menus, navigation aux flèches et par saisie, fermeture par Escape et clic extérieur, et focus qui revient au déclencheur à la fermeture.

Un menu est un seul arrêt de tabulation, et c'est justement ce que l'on rate

L'instinct est de rendre chaque élément focalisable, afin que Tab les parcoure un à un. Le pattern ARIA menu fait l'inverse : le menu entier constitue un seul arrêt de tabulation, et les flèches déplacent un roving tabindex entre les éléments tandis que Tab ferme le menu et le quitte. C'est ce qui fait qu'ignorer un menu de compte à 12 éléments coûte une frappe au lieu de douze. Cela explique aussi pourquoi les menus ont besoin d'une restauration explicite du focus : puisque le focus a été déplacé dans le panneau de manière programmatique, fermer sans le renvoyer au déclencheur laisse l'utilisateur clavier en haut du document. Générer le déclencheur et le panneau comme un seul composant préserve cet aller-retour, car les deux moitiés sont écrites selon le même contrat de focus.

6 modèles

Modèles de Menu déroulant que vous pouvez générer

Chaque modèle est un vrai prompt, pas une capture d'écran. Copiez-le dans n'importe quel éditeur IA, ou exécutez-le dans MeDo pour récupérer du code 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.

Tester dans 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.

Tester dans 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.

Tester dans 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.

Tester dans 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".

Tester dans 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.

Tester dans MeDo

Comment personnaliser votre Menu déroulant

Précisez qu'il s'agit d'un menu d'actions, pas d'un <select>

role="menu" indique aux technologies d'assistance que chaque élément exécute une commande. Si les éléments définissent plutôt une valeur de formulaire, demandez un listbox ou un <select> natif. Utiliser un menu pour un champ de formulaire amène les lecteurs d'écran à annoncer des commandes là où l'utilisateur attend des options.

Indiquez le délai d'intention de survol pour les sous-menus

Demandez environ 150ms de délai avant l'ouverture d'un sous-menu et un délai de grâce similaire avant sa fermeture. Sans cela, déplacer le pointeur en diagonale sur la liste parente ouvre et ferme trois sous-menus en route vers celui que vous visiez.

Demandez explicitement un positionnement anti-collision

Précisez que le panneau doit basculer au-dessus du déclencheur près du bord inférieur et se décaler horizontalement pour rester visible. Un menu ancré à un avatar en haut à droite est le cas le plus fréquent où un décalage fixe rend la moitié des éléments hors écran.

Isolez l'élément destructif

Placez les actions comme Se déconnecter, Supprimer ou Révoquer l'accès dans leur propre groupe sous un séparateur et demandez le traitement de couleur destructive. C'est la distance physique avec les éléments courants qui évite le mauvais clic, pas le texte rouge.

Qui utilise le composant Menu déroulant

Produit SaaS

Un menu avatar en haut à droite avec l'e-mail du compte en ligne d'en-tête statique, puis les liens profil et facturation, un sous-menu équipe, un bascule de thème et Se déconnecter isolé sous un séparateur.

Tableau de bord ou outil d'administration

Un menu de débordement au niveau de la ligne derrière un bouton à trois points, contenant Modifier, Dupliquer, Exporter et un Supprimer destructif, avec le déclencheur étiqueté par la ligne à laquelle il appartient afin que les lecteurs d'écran annoncent quel enregistrement est concerné.

Éditeur de contenu

Un menu d'insertion de blocs avec des types d'éléments groupés, un sous-menu de fournisseurs d'embed et un saut par lettre afin que celui qui connaît la liste atteigne un élément sans la parcourir aux flèches.

Navigation de site marketing

Un menu déroulant produits dans la navbar construit à partir d'une simple liste de liens plutôt que de role="menu", pour que le panneau se comporte comme la navigation qu'il est et que les liens restent focalisables individuellement et ouvrables dans un nouvel onglet.

Modèles de Menu déroulant pour différents sites web

Le même composant menu déroulant, adapté au type de site sur lequel il est publié.

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.

Styles et variantes de Menu déroulant

Choisissez la variante qui correspond au reste de la page, puis générez-la.

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.

Menu déroulant en React, Next.js, Vue et Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML simple — le même menu déroulant, six façons de l'intégrer.

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>

Comment ajouter votre Menu déroulant à un projet

Quatre étapes, du choix d'un modèle de menu déroulant à sa mise en production.

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.

Questions fréquentes à propos de Menu déroulant

Comment générer un menu déroulant avec l'IA ?

Listez les éléments souhaités, indiquez lesquels ouvrent des sous-menus et précisez où placer les séparateurs. MeDo génère le déclencheur, le panneau ancré, les éléments groupés et la gestion clavier comme un seul composant, si bien que les flèches, Escape, le clic extérieur et la restauration du focus sont câblés avant même votre première ouverture.

Quelle est la différence entre un menu déroulant et un <select> ?

Un menu déclenche des actions : choisir un élément fait quelque chose immédiatement et rien n'est stocké. Un <select> contient une valeur de formulaire : choisir une option modifie un état soumis plus tard. Ils utilisent des rôles et des contrats clavier différents, et échanger l'un pour l'autre est le défaut d'accessibilité le plus courant dans les menus déroulants personnalisés.

Un menu déroulant de navigation doit-il utiliser role="menu" ?

Non. role="menu" est destiné aux menus de commandes de type application ; l'appliquer à une liste de liens fait annoncer chaque lien comme menuitem tout en les réduisant à un seul arrêt de tabulation. Un menu déroulant de navigation doit être une simple liste d'ancres dans un disclosure que le déclencheur bascule via aria-expanded. Dites à MeDo que le panneau est de la navigation et il générera des liens plutôt que des éléments de menu.

Comment la navigation clavier doit-elle fonctionner dans un menu déroulant ?

Enter, Space ou Flèche Bas ouvrent le menu et donnent le focus au premier élément. Flèche Haut et Bas se déplacent entre les éléments avec bouclage aux extrémités, Home et End sautent au premier et au dernier, et taper une lettre passe à l'élément suivant commençant par ce caractère. Flèche Droite ouvre un sous-menu, Flèche Gauche le ferme, et Escape ou Tab ferment tout le menu en rendant le focus au déclencheur.

L'IA peut-elle générer un menu déroulant avec des sous-menus ?

Oui. Décrivez l'imbrication et MeDo génère l'élément parent avec aria-haspopup, le panneau enfant, le délai d'intention de survol et les liaisons Flèche Droite et Flèche Gauche. Limitez-vous à un niveau d'imbrication quand c'est possible, car un second niveau est difficile à atteindre au pointeur et difficile à décrire à un utilisateur de lecteur d'écran.

Un menu déroulant doit-il se fermer au clic extérieur ?

Oui, et il doit aussi se fermer avec Escape, au défilement d'un conteneur ancêtre et lorsque le déclencheur est cliqué de nouveau. Attachez l'écouteur extérieur sur pointerdown plutôt que click afin qu'un glissement démarrant hors du panneau le referme, et rendez toujours le focus au déclencheur pour que les utilisateurs clavier ne se retrouvent pas en haut de la page.

Générez votre menu déroulant maintenant.

Testez n'importe quel prompt — gratuit, sans inscription.

Commencer gratuitement Voir les tarifs

Barre de navigation

Décrivez votre site et obtenez une navbar entièrement responsive — avec logo, liens de navigation, menus déroulants et un menu hamburger mobile — générée depuis un seul prompt. Pas de modèles, pas de bidouillage.

Composants associés

Avatar

Générez des avatars prêts pour la production à partir d'un simple prompt. 6 patterns open source — photo, illustration style Notion, repli sur les initiales, badge de présence, groupe empilé, uploader — tous en Tailwind + shadcn, accessibles, thématisables et sous licence MIT. Copiez le code, ou régénérez n'importe lequel directement dans votre projet Lovable, Bolt, v0 ou Cursor.

Composants associés

Infobulle

Décrivez l'indication dont vous avez besoin et MeDo génère tout le comportement — délais d'ouverture et de fermeture, retournement pour éviter les bords du viewport, une flèche qui reste pointée vers le déclencheur, déclenchement au focus clavier et le câblage aria-describedby.

Composants associés