Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Dropdown (*Menu déroulant*)

Dropdown (*Menu déroulant*)

Composant
Définition

Composant qui affiche une liste d'options dans un panneau déroulant déclenché par un clic ou un focus. Le dropdown se referme après sélection ou clic à l'extérieur. Il existe en deux variantes principales : le menu d'actions (navigation, commandes) et le champ de sélection (formulaire). Le dropdown natif HTML `<select>` est stylistiquement limité mais accessible par défaut. Les dropdowns custom offrent plus de contrôle visuel au prix d'un travail d'accessibilité conséquent.

En pratique

On l'utilise quand la liste d'options dépasse cinq éléments et ne justifie pas d'être affichée en permanence. En dessous de cinq, des boutons radio sont préférables. La navigation au clavier (flèches, Entrée, Échap) est obligatoire. Le contenu du dropdown doit être visible sans scroll dans la plupart des cas. Sur mobile, le `<select>` natif déclenche le picker système, plus ergonomique que tout composant custom.

Exemple

GitHub utilise des dropdowns custom pour les filtres de pull requests (auteur, label, milestone). Chaque dropdown inclut un champ de recherche intégré pour les listes longues.

Voir aussi
Accessibilité (*Accessibility*)
Loi de Hick (*Hick's Law*)
ARIA (*Accessible Rich Internet Applications*)
Fenêtre modale (*Modal*)
Sources
Dropdowns - Nielsen Norman Group
Listbox Pattern - WAI-ARIA
Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.