Aller au contenu
SkillCodex
Menu

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.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : une liste d'actions sous les trois pointscliquer sur ce bouton pour afficher modifier et supprimerun menu compact pour les actions d'une ligne

Toutes les formulations
Enregistrer et partager

Reconnaître

Petites surfaces contextuelles

Essayer

As-tu besoin d’une explication brève, d’un contenu contextuel interactif ou d’une liste d’actions ?

Menu d'actions déroulant

Contexte commun aux essais

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.

Menu d'actions déroulant

Mission

Menu d'actions - Dropdown menu

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.

Carte de lancement

Préparation finale

1 copie

Résultat de l’essai

Aucune action lancée. Le menu est fermé.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
Une liste verticale d'actions s'ouvre sous le bouton avec le premier élément actif disponible.
Cas limite
L'action Archiver indisponible expose son état désactivé et ne peut pas être activée.

Ce que cet essai montre

Utiliser le Menu d'actions déroulant pour des commandes comme Modifier ou Archiver, pas pour choisir une valeur de formulaire comme Select ni pour un contenu riche comme Popover.

Lequel convient à ton besoin ?

Menu d'actions déroulant

Regrouper les actions secondaires d'un élément

Infobulle

Expliquer une icône peu familière

Quel composant utilises-tu ici ?
Différence et sources

Utiliser le Menu d'actions déroulant pour des commandes comme Modifier ou Archiver, pas pour choisir une valeur de formulaire comme Select ni pour un contenu riche comme Popover.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Déclencheur

    Le contrôle qui ouvre ou révèle la surface.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Petites surfaces contextuelles

      Menu d'actions déroulant appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Infobulle

      Choisis Menu d’actions déroulant si l’utilisateur doit choisir une action comme Modifier, Dupliquer ou Archiver. Choisis Infobulle si un texte court explique simplement une icône ou un contrôle et que rien n’y est cliquable.

      Comparer cette paire
    • Ne pas confondre

      Fenêtre contextuelle

      Choisis Menu d’actions déroulant si chaque élément est une action comme Modifier ou Archiver. Choisis Fenêtre contextuelle si le contenu est explicatif ou interactif sans se limiter à une liste d’actions.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    Ce que les gens décrivent

    Alias documentés : menu d'actions, menu de débordement, menu trois points, menu contextuel

    • 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

    Choisir

    À 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

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Place le focus sur le bouton du menu, ouvre-le avec Entrée, puis parcours les actions avec les flèches.

      Résultat attendu

      Le focus atteint une action disponible et suit les flèches sans devoir parcourir chaque élément avec Tab.

    2. 2. À faire

      Active une action sans conséquence, puis rouvre le menu et essaie une action indisponible.

      Résultat attendu

      L’action disponible s’exécute une fois ; l’action indisponible ne s’exécute pas et son indisponibilité est indiquée.

    3. 3. À faire

      Rouvre le menu, atteins une autre action, puis appuie sur Échap.

      Résultat attendu

      Le menu se ferme sans exécuter cette action, et le focus revient au bouton du menu.

    Contrat complet
    1. 1Chaque élément est une action et non une valeur de formulaire
    2. 2La navigation par flèches suit le pattern menu
    3. 3Les éléments désactivés exposent leur état et ne peuvent pas être activés
    4. 4La fermeture restaure le focus sur le déclencheur

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Menu d’actions déroulant sans casser son comportement

    # Implémenter Menu d’actions déroulant dans ton agent
    
    ## Objectif
    Implémente Menu d’actions déroulant pour ce comportement vérifié : Une liste compacte d’actions qui s’ouvre depuis un bouton et suit la navigation clavier d’un menu.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme que Menu d’actions déroulant répond au besoin avant de coder.
    
    ## Comportement requis
    - Activer le déclencheur ouvre la surface, puis peut la refermer au second appui.
    - Les flèches parcourent les actions, puis Entrée ou Espace en active une.
    - Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent.
    
    ## États à couvrir
    - Menu fermé
    - Menu ouvert
    
    ## Accessibilité
    - Rôle ARIA : menu > menuitem
    - Le contrôle principal ou la région nommée pour Menu d’actions déroulant 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.
    - L’ouverture place le focus du menu sur un élément disponible ; la fermeture le restaure sur le déclencheur.
    - Sélectionner une action, appuyer sur Échap ou cliquer sans risque à l’extérieur ferme le menu.
    - 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.
    - Entrée, Espace ou Flèche bas ouvre le menu
    - Les flèches parcourent les éléments
    - Entrée ou Espace active l’élément courant
    - Échap ferme le menu
    
    ## Quand ne pas utiliser
    - L’utilisateur sélectionne la valeur d’un champ
    - Le contenu contient des paragraphes explicatifs ou un formulaire
    
    ## Critères d’acceptation
    - Chaque élément est une action et non une valeur de formulaire
    - La navigation par flèches suit le pattern menu
    - Les éléments désactivés exposent leur état et ne peuvent pas être activés
    - La fermeture restaure le focus sur le déclencheur
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • @radix-ui/react-dropdown-menu
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Menu d’actions déroulant sur un parcours réel

    # Vérifier Menu d’actions déroulant après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Menu d’actions déroulant au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:c973188e08d6e68be1acb81009e90e9bf197ea089125eff8903b28bf5419c9ce

    Diagnostiquer un problème

    Trouve et corrige le défaut de Menu d’actions déroulant

    # Déboguer Menu d’actions déroulant dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés de Menu d’actions déroulant.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Chaque élément est une action et non une valeur de formulaire
    - La navigation par flèches suit le pattern menu
    - Les éléments désactivés exposent leur état et ne peuvent pas être activés
    - La fermeture restaure le focus sur le déclencheur
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • @radix-ui/react-dropdown-menu
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction de Menu d’actions déroulant

    # Empêcher la régression de Menu d’actions déroulant
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Menu d’actions déroulant aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:be7771c73409a30d91b018c7ef98a2604a818d8d1f4627c2d22402c07ace9867

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:3543e910104d818cb08457e3e1a8759ae7df20bf05cbd5ce9383f471861d6f0b

    Dans le code

    TechnologiePrimitiveVersionLimite
    @radix-ui/react-dropdown-menu

    DropdownMenu.Root

    @radix-ui/react-dropdown-menu@2.1.20Dropdown Menu modélise des actions, pas un sélecteur de valeur de formulaire ; il ne remplace ni Select ni Listbox.

    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 expose son état désactivé et ne peut pas être activée.

    Signaux visuels

    • Liste verticale près d'un déclencheur
    • Les éléments portent des libellés d'action
    • Peut inclure des séparateurs ou actions désactivées

    Signaux comportementaux

    • Les flèches déplacent un seul élément actif
    • Sélectionner exécute une action et ferme le menu
    • La saisie peut atteindre un élément par son libellé

    Accessibilité

    Rôle
    menu > menuitem
    Nom accessible
    Le contrôle principal ou la région nommée pour Menu d'actions déroulant 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 clavier
    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.
    Défilement
    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 ou Espace active l'élément courant
    • Échap ferme le menu

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • DropdownMenu.Root

      implementationKind
      radix
      nativeElement
      Non applicable
      ariaPattern
      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
      sourceId
      source-ui-radix-dropdown-menu
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Dropdown Menu modélise des actions, pas un sélecteur de valeur de formulaire ; il ne remplace ni Select ni Listbox.

      Vérifier la source du binding

    Sources

    • WAI-ARIA APG: Menu and Menubar Pattern
      sourceId
      source-ui-aria-menu-menubar
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:36Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:99463b20454ca421ca96421809f2bedc7a7ba86db3f8c0e1d6b5bdad1880e744
      status
      verified

      Affirmation couverte : Menu d'actions déroulant : guide APG informatif pour le modèle menu et barre de menus : rôles, états, relations et interactions au clavier.

    • Radix Primitives: Dropdown Menu
      sourceId
      source-ui-radix-dropdown-menu
      kind
      documentation
      canonicalUrl
      https://www.radix-ui.com/primitives/docs/components/dropdown-menu
      publisher
      Radix Primitives
      sourceRevision
      http-etag:W/"286f80a30ca24d54991556335861ce8b"
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:438621ebadd2ac4653da60d5020f315f977b741b8c8496cff17b158de0190ba0
      status
      verified

      Affirmation couverte : Menu d'actions déroulant : parties, API d'état, interactions et limites d'implémentation documentées pour Radix Dropdown Menu.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Menu d'actions déroulant : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

    • WAI-ARIA APG: Button Pattern
      sourceId
      source-ui-aria-button
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/button/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:36Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:863329ea659a53439b0953eec0bd0af7c6219e372d0e878f75e57d263924704c
      status
      verified

      Affirmation couverte : Menu d'actions déroulant : guide APG informatif pour le modèle bouton : rôles, états, relations et interactions au clavier.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Affirmation couverte : Menu d'actions déroulant : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.