Passer au contenu principal

Sélecteur de contexte

Note: Ce composant doit être utilisé uniquement dans le cadre des modèles UX d'en-tête et non dans des scénarios isolés ou personnalisés.

Présentation​

Le composant Sélecteur de contexte est principalement une liste déroulante contenant une liste d'objets de la page parent. Il agit au niveau de la navigation et apparaît donc comme un composant important soit dans le panneau de navigation de gauche, soit dans la barre de navigation horizontale.

Bouton du sélecteur de contexte

Meilleures pratiques​

  • Le sélecteur de contexte ne doit être utilisé que dans les scénarios où un changement fréquent/rapide d'objets est nécessaire. Dans Advanced Product Designer, par exemple, vous pouvez passer d'un produit d'assurance à un autre.
    • Si l'un ou l'autre n'est pas requis ou possible, d'autres moyens appropriés pour modifier l'objet doivent être utilisés (par exemple, retour à la page précédente, action tertiaire pour « modifier l'objet », etc.)
  • Le sélecteur de contexte peut être utilisé comme élément de navigation dans le panneau de gauche ou dans la navigation supérieure, selon le cas d'utilisation.
  • Étant donné que tous les objets se trouvent au niveau enfant, les éléments de menu doivent rester les mêmes pour tous les objets et ne pas changer au fur et à mesure que les objets sont sélectionnés.
  • Pour accéder à la liste complète des objets, revenez à la page parent au lieu d'afficher une longue liste d'objets.
  • S'il existe une longue liste d'objets, affichez uniquement les éléments les plus fréquemment consultés ou les éléments les plus importants de la liste du sélecteur de contexte.
  • Un panneau de navigation à gauche peut être utilisé conjointement avec la barre de navigation horizontale pour afficher des options de sous-menu.

Interactions​

La sélection/la focalisation sur le sélecteur de contexte active la liste déroulante des contextes disponibles.

Liste déroulante du sélecteur de contexte

La sélection de l'un des éléments de la liste déroulante recharge la page en cours pour s'adapter au contexte modifié.

On this page