Dropdown Menu · Documentation

UIMenu déroulant

Actions compactes dans le contexteLien vers la section

Les Menu déroulant Composant affiche une liste d'actions à l'intérieur d'une surface flottante ancrée à un déclencheur.

Utilisez-le pour:

actions en ligne
Menus de compte
menus de l'éditeur
listes de commandes compactes
Actions secondaires
sélecteurs d'options
petits choix contextuels

Le menu déroulant est construit sur Radix DropdownMenu et stylisé avec des tokens PyColors tels que bg-popover, border-borderet text-popover-foreground.

Idée de base

Le menu déroulant est pour les actions contextuelles compactes. Il ne devrait pas devenir une surface de flux de travail complète.

ImportationLien vers la section

dropdown-menu-import.tsx

import { DropdownMenu } from "@pycolors/ui";

Utilisation de baseLien vers la section

Utilisation DropdownMenuTrigger asChild avec un déclencheur sémantique, généralement un bouton.

Règle de déclenchement

Préférez asChild donc le déclencheur conserve la sémantique de l'élément que vous passez, comme un bouton réel.

Utilisez le menu déroulant lorsque les actions sont secondaires, contextuelles ou compactes.

Actions en ligne

Utiliser pour renommer, dupliquer, archiver, exporter ou supprimer des actions sur un enregistrement.

Préférences

Utilisez la case à cocher ou les éléments radio pour la sélection d'options compactes.

Menu Compte

Utilisez-le pour une navigation compacte au niveau de l'utilisateur, comme le profil, les paramètres ou la déconnexion.

Groupement, étiquettes et raccourcisLien vers la section

Utilisez des étiquettes et des groupes lorsqu'un menu a plus d'un type d'action.

Règle de raccourci

DropdownMenuShortcut est visuelle. Il n'enregistre pas automatiquement les raccourcis clavier.

Case à cocherLien vers la section

Utilisez des cases à cocher pour les bascules indépendantes.

Les exemples interactifs avec state doivent résider dans un composant client.

Loading preview…

Groupe de radioLien vers la section

Utilisez des articles de radio pour une sélection exclusive.

Sous-menusLien vers la section

Utilisez les sous-menus avec parcimonie.

Ils sont utiles lorsqu'une seule action a un petit choix secondaire, tel que le format d'exportation.

Règle du submenu

Gardez la profondeur du sous-menu à un niveau chaque fois que possible. Les menus profondément imbriqués sont plus difficiles à analyser et à naviguer.

UtilisationsLien vers la section

Commencez par le déclencheur

Utilisez un déclencheur clair tel que Actions, Moreou un bouton d'icône avec une étiquette accessible.

Gardez les éléments orientés vers l'action

Préférez les étiquettes verbe-first : Renommer, Dupliquer, Archiver, Exporter, Supprimer.

Groupe seulement si nécessaire

Utilisez des étiquettes et des séparateurs pour clarifier la structure, pas pour décorer le menu.

Confirmer les actions destructrices

Un élément de menu destructeur devrait généralement ouvrir une boîte de dialogue avant l'action finale.

Déplacer des workflows complexes ailleurs

Si le menu contient des formulaires, du contenu long ou des décisions en plusieurs étapes, utilisez Sheet, Boîte de dialogue ou une page.

Situation	Utilisation
Actions en ligne	menu déroulant
Menu Compte	menu déroulant
Petit sélecteur de préférences	menu déroulant
Confirmation destructive	boîte dialogue
Filtres avancés	Sheet
Flux de travail des paramètres longs	Sheet ou page
Débit en plusieurs étapes	Page

Règle de décision

DropdownMenu expose les choix compacts. Le dialogue confirme les décisions ciblées. Sheet gère des flux de travail latéraux plus importants.

APILien vers la section

Composante

Composante	Désignation
`DropdownMenu`	Récipient racine
`DropdownMenuTrigger`	Élément d'ancrage, généralement avec `asChild`
`DropdownMenuContent`	Surface de menu flottante
`DropdownMenuItem`	Mesure standard
`DropdownMenuCheckboxItem`	Élément à bascule indépendant
`DropdownMenuRadioGroup`	Groupe de sélection exclusif
`DropdownMenuRadioItem`	Élément dans un groupe de radio
`DropdownMenuLabel`	Étiquette de section
`DropdownMenuSeparator`	Diviseur
`DropdownMenuShortcut`	Raccourci visuel aligné à droite
`DropdownMenuGroup`	Emballage de groupe
`DropdownMenuSub`	Sous-menu racine
`DropdownMenuSubTrigger`	Élément déclencheur du sous-menu
`DropdownMenuSubContent`	Sous-menu
`DropdownMenuPortal`	Portal wrapper pour le contenu du menu

Ajouts d'emballage

Composante	Ajout de prop	Objet
`DropdownMenuItem`	`inset?: boolean`	Aligner l'élément avec l'espacement des indicateurs
`DropdownMenuLabel`	`inset?: boolean`	Aligner l'étiquette sur les éléments insérés
`DropdownMenuSubTrigger`	`inset?: boolean`	Aligner le trigger du sous-menu avec les éléments insérés

Les composants du menu déroulant étendent leurs accessoires Radix respectifs.

dropdown-menu-props.ts

React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>;
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>;

AccessibilitéLien vers la section

Le menu déroulant est construit sur les primitives Radix DropdownMenu.

La prise en charge du clavier comprend :

Entrer ou Espace active un élément
Touches fléchées pour naviguer
Escape ferme le menu
Sous-menus support clavier navigation
Le focus revient au déclencheur lorsqu'il est fermé

Directives :

utilisation DropdownMenuTrigger asChild avec un déclencheur sémantique
fournir un aria-label pour les déclencheurs icon-only
éviter les entrées complexes dans les menus déroulants
Ne comptez pas sur le texte de raccourci comme seule instruction
confirmer les actions destructrices dans une boîte de dialogue si nécessaire

Règle d'accessibilité

Un menu déroulant devrait être rapide à numériser et rapide à quitter. Si les utilisateurs doivent penser, lire ou taper, utilisez une autre surface.

Préférez/évitezLien vers la section

Préférez

Étiquettes d'action courte
Déclencheurs sémantiques
groupes uniquement lorsqu'ils améliorent la numérisation
Confirmation de la boîte de dialogue pour les actions destructrices
sous-menus uniquement pour les petits choix secondaires

Éviter

longs paragraphes à l'intérieur des menus
sous-menus imbriqués profonds
formulaires ou entrées complexes dans une liste déroulante
Des actions destructrices sans confirmation
Utiliser les menus pour les actions principales

Directives de copie du produitLien vers la section

Les étiquettes des éléments de menu doivent être courtes et orientées vers l'action.

Renommer
Dupliquer
Archive
Exporter CSV
Supprimer

Questions courantesLien vers la section

BoutonUtilisez des boutons sémantiques pour les déclencheurs et les actions primaires.boîte dialogueUtilisez la boîte de dialogue pour confirmer les actions destructrices à partir d'un menu.SheetUtilisez Sheet pour des flux de travail, des filtres ou des panneaux de détails plus importants.Motif de recouvrementsChoisissez entre menu déroulant, boîte de dialogue et feuille pour les flux de produits.