Dropdown menu
Menu d'actions déroulant
Une liste compacte d'actions qui s'ouvre depuis un bouton et suit la navigation clavier d'un menu.
Avec vos mots
Ce que les gens décrivent
Alias documentés : menu d'actions, menu de débordement, menu trois points
- une liste d'actions sous les trois points
- cliquer sur ce bouton pour afficher modifier et supprimer
- un menu compact pour les actions d'une ligne
- le petit menu qui s'ouvre sous un bouton
- plus d'options dans une liste flottante
- un menu clavier pour renommer dupliquer et archiver
Essayer
Petites surfaces contextuelles
Comparer les trois comportements
Scénario comparatif partagé : Un espace projet doit révéler une aide brève, des détails complémentaires ou une courte liste d'actions depuis un contrôle compact sans quitter la tâche en cours.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Votre mission
Ouvrir le menu, atteindre Dupliquer avec les flèches, l'activer et vérifier le retour du focus sur le bouton d'actions de la ligne.
Cas limite à vérifier
L'action Archiver indisponible est ignorée pendant la navigation clavier et expose son état désactivé.
Parties du spécimen
À utiliser quand
- Regrouper les actions secondaires d'un élément
- Proposer un menu de débordement dans une barre compacte
À éviter quand
- L'utilisateur sélectionne la valeur d'un champ
- Le contenu contient des paragraphes explicatifs ou un formulaire
Comparer les concepts proches
Choisir Infobulle seulement pour un contenu bref sans élément interactif ; utiliser Popover pour des contrôles ou un contenu plus riche.
InfobulleContrairement à une Infobulle, un Popover peut contenir du contenu interactif ; contrairement au Menu déroulant, il ne se limite pas à une liste d'actions.
Fenêtre contextuelleBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Basculer à l'activation
Activer le déclencheur ouvre la surface, puis peut la refermer au second appui.
Parcourir les actions
Les flèches parcourent les actions, puis Entrée ou Espace en active une.
Fermer avec Échap
Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent.
États
Menu fermé
Menu fermé
Menu ouvert
Menu ouvert
Transitions d’état
Menu fermé → Menu ouvert
Le déclencheur est activé au pointeur, au toucher, avec Entrée, Espace ou Flèche bas.
Menu ouvert → Menu fermé
Une commande est choisie, ou Échap ou une interaction extérieure autorisée ferme le menu.
Scénarios de test
- Contexte
- Chaque ligne de projet possède un bouton à trois points pour Renommer, Dupliquer et Archiver.
- Mission
- Ouvrir le menu, atteindre Dupliquer avec les flèches, l'activer et vérifier le retour du focus sur le bouton d'actions de la ligne.
- État principal
- Une liste verticale d'actions s'ouvre sous le bouton avec le premier élément actif disponible.
- Cas limite
- L'action Archiver indisponible est ignorée pendant la navigation clavier et expose son état désactivé.
Accessibilité
- Role
- menu with menuitem children
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- L'ouverture place le focus du menu sur un élément disponible ; la fermeture le restaure sur le déclencheur.
- Fermeture
- Sélectionner une action, appuyer sur Échap ou cliquer sans risque à l'extérieur ferme le menu.
- Scroll
- Le défilement de la page reste disponible. La surface flottante reste ancrée à son déclencheur ou se ferme lorsque celui-ci quitte la zone visible.
- Annonce
- Le déclencheur indique qu'il ouvre un menu, et les noms, états désactivés et états cochés des éléments sont annoncés.
- Clavier
- Entrée, Espace ou Flèche bas ouvre le menu
- Les flèches parcourent les éléments
- Entrée active l'élément courant
- Échap ferme le menu
Bindings
DropdownMenu.Root
- implementationKind
- radix
- nativeElement
- Non applicable
- ariaPattern
- dropdown menu
- radixPrimitive
- Dropdown Menu
- shadcnRecipe
- Dropdown Menu
- runtimeDependency
- @radix-ui/react-dropdown-menu@2.1.20
- packageName
- @radix-ui/react-dropdown-menu
- exportName
- DropdownMenu.Root
- exactVersion
- 2.1.20
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Radix Dropdown Menu models actions, not a form value picker; it must not substitute for Select or Listbox.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Menu and Menubar Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Dropdown menu: menu and menuitem semantics plus the expected directional keyboard interaction.
- Radix Primitives: Dropdown Menu
Radix Primitives · documentation · 2026-07-16
Affirmation couverte : Dropdown menu: documented Radix Dropdown Menu parts, action semantics, focus management, and keyboard behavior.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.