Le menu de dépassement indique qu'il y a plus de contenu disponible dans un objet de l'interface utilisateur que ce qui peut être affiché en une seule fois. Des listes, des options et des fonctionnalités supplémentaires peuvent être masquées dans un menu extensible afin de ne pas encombrer l'interface principale.
B. Menu de dépassement dans une barre de navigation supérieure.
Le menu de dépassement est indiqué par une icône représentant un point de suspension. Il apparaît à l'extrémité (droite) d'une rangée de titres de navigation ou sur une ligne de contenu.
Icône de point de suspension : le menu de dépassement de type tableau est indiqué par une icône de point de suspension qui apparaît toujours sur le côté droit d'une ligne de tableau.
Menu déroulant : le menu de dépassement comprend une liste d'interactions supplémentaires, par exemple, des outils/actions comme supprimer, modifier, dupliquer (dupliquer la ligne).
Ombre de menu déroulant : une ombre est utilisée dans le menu de dépassement pour le distinguer clairement du fond sur lequel il est placé.
Icônes d'outils/actions : des icônes peuvent être ajoutées aux éléments de la liste du menu de dépassement pour indiquer clairement et rapidement la fonctionnalité associée.
Libellés d'outils : les éléments de la liste du menu de dépassement sont étiquetés conformément aux directives du menu déroulant de Jutro.
Icône de point de suspension : le menu de dépassement de type navigation supérieure est indiqué par une icône de point de suspension qui apparaît toujours sur le côté droit d'un bandeau de navigation supérieur.
Menu déroulant : le menu de dépassement comprend une liste de liens de navigation supérieure supplémentaires.
Ombre de menu déroulant : une ombre est utilisée dans le menu de dépassement pour le distinguer clairement du fond sur lequel il est placé.
Placez toujours l'icône du menu de dépassement (point de suspension) à la fin d'un objet (lorsque le début et la fin se trouvent à gauche/à droite, il s'agit du côté droit) pour indiquer la présence d'un contenu ou d'une fonctionnalité supplémentaire.
Utilisez les menus de dépassement pour garantir la clarté des interfaces utilisateur en masquant les options secondaires dans un menu extensible ou, en guise d'alternative, pour afficher les actions importantes en termes d'engagement.
Assurez-vous d'inclure uniquement les actions nécessaires à la réalisation des tâches prioritaires et pertinentes d'un point de vue contextuel, ainsi que de les répertorier par ordre de fréquence d'utilisation.
Utilisez des menus de dépassement pour limiter les éléments de menu ou les actions supplémentaires au fur et à mesure qu'ils sont ajoutés à l'interface utilisateur.
N'utilisez pas de menus en cascade.
Désactivez les options qui ne sont pas pertinentes dans un contexte donné.
Un symbole de point de suspension utilisé pour représenter un menu de dépassement est mis en évidence lorsqu'il est survolé, ce qui indique une interactivité.
Un symbole de menu de dépassement (point de suspension) peut rester invisible tant qu'un utilisateur ne survole pas un objet associé (comme une ligne de tableau) ou qu'il clique dessus, ce qui permet d'attirer l'attention sur l'intégration de l'objet et de la fonctionnalité du menu de dépassement.
Si un utilisateur clique sur le symbole du point de suspension utilisé pour représenter le menu de dépassement, un menu déroulant de contenu apparaît ; s'il clique ensuite n'importe où à l'extérieur du menu, celui-ci disparaîtra.
Les éléments du menu de dépassement apparaissent en évidence sur un fond bleu lorsque l'utilisateur les survole ; un simple clic de souris déclenche l'action ou le lien à partir du menu.
Le composant Menu de dépassement fait partie du menu de navigation et, en tant que tel, comprend le rôle 'menuitem'. Le rôle WAI-ARIA de aria-expanded="false' indique que son état par défaut est réduit et qu'il contient du contenu supplémentaire. Cette valeur bascule sur « true » lorsque le menu de dépassement est développé.
Considérations sur la conception de l'expérience utilisateur
Le texte d'un menu de dépassement doit être direct et concis pour que les utilisateurs puissent rapidement choisir une action.
Pour les actions susceptibles d'entraîner une modification importante des données des utilisateurs, envisagez l'utilisation d'une règle horizontale pour séparer cette action et la répertorier sous l'ensemble principal des actions.
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
The function must return a React Element that represents the trigger element for the menu, for example a Button as used in the examples. The trigger element must take at least three arguments: an object of props for the component; an onClick callback function; and a Boolean variable to control the state of visibility, like isVisible.
Props to pass to the render trigger element. The CustomProps type depends on what other components might be wrapping DropdownMenu. The DropdownMenuTriggerProps are defined in the 'Show object details' section.
Function that runs when menu is opened or closed. The function has an optional argument named open that is a boolean which is true if the menu is being opened.
Description
Props to pass to the render trigger element. The CustomProps type depends on what other components might be wrapping DropdownMenu. The DropdownMenuTriggerProps are defined in the 'Show object details' section.
DropdownMenu sont des composants qui utilisent DropdownMenuHeader, DropdownMenuLink et DropdownMenuSeparator comme composants enfants. Les propriétés de ces composants sont les suivantes :
Les menus de dépassement sont affichés à l'aide du composant DropdownMenu. La propriété renderTrigger détermine le composant avec lequel DropdownMenu est affiché.
Lorsque l'utilisateur active le composant, il affiche une arborescence des éléments suivants :
DropdownMenuLink
DropdownMenuSeparator
DropdownMenuHeader
Consultez la section Utilisation pour découvrir comment concevoir correctement un menu de dépassement et connaître les différentes options de configuration que nous proposons.
L'exemple suivant illustre la création d'un composant DropdownMenu simple. La propriété renderTrigger définit un bouton qui ouvre le menu lorsque vous cliquez dessus.
<DropdownMenu id="dropdown-menu" renderTrigger={( { id, menuId, ref, 'aria-haspopup': ariaHasPopup, 'aria-expanded': ariaExpanded, title ='Menu', onKeyDown, }, toggleMenu )=>{ return( <Button id={id} ref={ref} aria-expanded={ariaExpanded} aria-controls={menuId} aria-haspopup={ariaHasPopup} onClick={()=>toggleMenu()} onKeyDown={onKeyDown} label={title} /> ); }}> <DropdownMenuLink>First menu item</DropdownMenuLink> <DropdownMenuLink>Second menu item</DropdownMenuLink> <DropdownMenuLink>Third menu item</DropdownMenuLink> </DropdownMenu>
