Menu latéral

Menu latéral dans Storybook

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.

Pour obtenir de la documentation sur le composant de menu latéral pour les modèles UX de mise en page, reportez-vous à cette page.

Utilisation

Présentation

Le composant de menu latéral remplace l'en-tête global et la navigation standard sur les téléphones portables et les tablettes ou, à la demande, sur simple modification de la configuration.

Structure

Le composant de menu latéral comprend les éléments suivants :

1. Icône du bouton du menu latéral : utilisée pour ouvrir la navigation dans le produit.
2. Conteneur du menu latéral : organise les éléments de navigation et tout autre contenu non essentiel à l'objectif immédiat de l'utilisateur, comme les paramètres et l'aide.
3. Icône du bouton de fermeture : ferme le menu latéral.
4. Zone de recherche : permet aux utilisateurs d'effectuer une recherche.
5. Navigation dans l'application : éléments de menu et de navigation que les utilisateurs peuvent sélectionner.
6. Sélecteur d'applications : permet aux utilisateurs de changer d'application.
7. Avatar utilisateur : comprend le nom complet de l'utilisateur et des liens.
8. En-tête global : inclut l'icône de notification représentant une cloche.

Meilleures pratiques

• Sur les téléphones portables et les tablettes, le menu latéral doit apparaître à la place du système de navigation pour ordinateur de bureau.
• Utilisez le menu latéral pour les éléments de navigation qui ne sont pas directement nécessaires à l'objectif de votre application. L'utilisateur est ainsi immédiatement attiré par la tâche principale à traiter.

Réactivité/Adaptabilité

Le menu latéral a une largeur fixe.

Interactions

1. Lorsque l'utilisateur clique sur l'icône du menu latéral, un panneau de navigation réductible apparaît. Les utilisateurs peuvent faire disparaître le menu latéral en cliquant sur l'icône du bouton de fermeture (X).
2. Les utilisateurs peuvent naviguer dans l'application en cliquant sur le lien des éléments de menu.
3. Pour passer d'une application à l'autre, les utilisateurs cliquent sur le sélecteur d'applications. Une liste déroulante regroupant des applications apparaît alors.
4. Pour afficher les notifications, les utilisateurs peuvent cliquer sur l'icône de notification représentant une cloche.

Considérations sur la conception de l'expérience utilisateur

• Les étiquettes de menu et d'élément de menu doivent être précises et informatives.
• Rédigez des étiquettes concises qui communiquent clairement l'objectif de la sélection.
• La majorité des liens doivent être des noms. Par exemple, la page Profil d'utilisateur.
• Chaque élément de menu doit apparaître sous la forme d'une unique ligne de texte.
• Commencez la phrase par une majuscule dans la plupart des cas, y compris les en-têtes, les titres, les noms de menu, les éléments de menu et les éléments de navigation. Cela permet d'adopter un style convivial et conversationnel tout en facilitant la traduction pour les marchés et produits non américains. Les noms propres et les titres devant les noms constituent des exceptions.

Code

Démonstration d'un exemple de base sur storybook

.

<Header>
  <BurgerMenu
    burgerContent={[
      <BurgerMenuItem
        key="item"
        id="item"
        isContainerOnly>
        Menu Item
      </BurgerMenuItem>,
      <BurgerMenuLink
        key="link"
        id="link">
        Menu Link
      </BurgerMenuLink>,
    ]}
  />
</Header>

Instruction d'importation

import { BurgerMenu, BurgerMenuItem, BurgerMenuLink } from '@jutro/router';

Cahier des charges du composant

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.

Propriétés

Propriétés du menu latéral

burgerContent

Type

node[]

Description

Elements to render in the sidebar.

buttonClassName

Type

string

Description

An optional CSS class for the burger menu button.

className

Type

string

Description

CSS class name for this component.

closeOnItemClick

Type

bool

Description

If set to true, clicking items on the burger menu which does not change browser location will cause the menu to close. This can be overwritten per item by setting a closeOnClick property on it. Note that if an item changes browser location, the menu will always be closed.

separatorClassName

Type

string

Description

The HTML tag which will be used to render item.

Propriétés des éléments d'un menu latéral

idobligatoire

Type

string

Description

Unique identifier for the component.

className

Type

string

Description

CSS class name for this component.

closeOnClick

Type

boolean

Description

If set to true, clicking this item will close the burger menu. Note that if an item changes browser location, the menu will always be closed.

hideSeparator

Type

boolean

Description

If set to true, it will not render a separator.

isContainerOnly

Type

boolean

Description

If set to true, the item will be rendered without 'interactive item' styling. This does not affect any attached event handlers.

separatorClassName

Type

string

Description

The HTML tag which will be used to render item.

separatorClassName

Type

React.ElementType

Description

The HTML tag which will be used to render item.

Valeur par défaut

div

Propriétés des liens d'un menu latéral

idobligatoire

Type

string

Description

Unique identifier for the component.

children

Type

React.ReactNode

Description

The content of the item.

hideSeparator

Type

boolean

Description

If set to true, it will not render a separator.

seperatorClassName

Type

string

Description

An optional CSS class for the burger sidebar item separator.

Crochets

Aucun crochet n'est disponible pour burger menu.

Clés de traduction

Trois clés de traduction sont associées au composant de menu latéral :

Clé	Utilisée pour
jutro-router.BurgerMenu.Open Menu	Valeur aria-label pour le bouton Ouvrir le menu
jutro-router.BurgerMenu.Menu header title	Valeur aria-label pour le titre de l’en-tête
jutro-router.BurgerMenu.Close navigation	Valeur aria-label pour le bouton Fermer la navigation

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Exemples

Consultez la section Utilisation pour découvrir comment concevoir correctement un élément burger menu et connaître les différentes options de configuration que nous proposons.

Menu latéral de base

Un menu latéral de base est un bouton situé dans un en-tête qui peut être utilisé pour ouvrir un menu. Le menu est défini par la propriété burgerContent, qui peut contenir une série de nœuds. Il existe des composants spécifiques pour les éléments d'un menu latéral comme BurgerMenuItem et BurgerMenuLink qui peuvent être utilisés dans la série burgerContent.

Démonstration d'un exemple de base sur storybook

.

<Header>
  <BurgerMenu
    burgerContent={[
      <BurgerMenuItem
        key="item"
        id="item"
        isContainerOnly>
        Menu Item
      </BurgerMenuItem>,
      <BurgerMenuLink
        key="link"
        id="link">
        Menu Link
      </BurgerMenuLink>,
    ]}
  />
</Header>

Journal des modifications