Dropdown

Le dropdown permet à l'utilisateur de sélectionner une seule option ou action dans une liste déroulante prédéfinie.

Description

Le dropdown permet à l'utilisateur de sélectionner une seule option ou action dans une liste déroulante prédéfinie. Son utilisation est recommandée sur les filtres rapides ou les menus de navigation car l'action produite au choix d'une option est immédiate.

Lorsqu'elle est repliée, elle affiche l'option sélectionnée et lorsqu'elle est ouverte, elle affiche une liste déroulante d'options prédéfinies.

Le dropdown peut être déclenché par un bouton, un sélecteur ou tout autre type de bouton d'action.  

Plateformes

Anatomie

  1. Option sélectionnée : un seul élément peut-être sélectionné à la fois
  2. Option par défaut, non sélectionnée
  3. Scroll bar : permet à l'utilisateur de scroller dans le container lorsqu'il y a un grand nombre d'options
  1. Action : liste des actions. Un seul élément peut-être activé à la fois
  1. Titre
  2. Radio : liste de radio qui permet à l'utilisateur de sélectionner une seule option
  1. Search : permet de faire une recherche dans une longue liste d'options
  2. Checkbox : liste de checkbox qui permet à l'utilisateur de sélectionner une ou plusieurs options

Usage

Quand l'utiliser ?

  • Lorsque l’utilisateur doit choisir parmi plusieurs options ou actions.
  • Pour masquer des actions secondaires dans un menu compact.
  • Dans une interface où l’espace est limité.
  • Pour organiser des paramètres, filtres ou menus contextuels sans encombrer la vue.

Des questions ou un feedback ?

N’hésitez pas à contacter la team Design System par mail.