Barre de navigation

Barre de navigation dans Storybook

Utilisation

Présentation

La barre de navigation est un composant secondaire de la navigation qui aide les utilisateurs à identifier leur emplacement actuel et à se déplacer vers un niveau parent ou à accéder à une étape précédente. Constitué de liens de texte, chaque lien d'une barre de navigation représente une page, à un niveau supérieur, à laquelle les utilisateurs peuvent rapidement accéder.

Les barres de navigation sont un élément de navigation important qui permet de trouver rapidement l'emplacement des données recherchées. Les utilisateurs savent où ils se trouvent dans la structure hiérarchique d'une application.

Quand l'utiliser

• Produits et expériences avec des hiérarchies de plus de deux niveaux.
• Vous souhaitez informer l'utilisateur de l'endroit où il se trouve dans la hiérarchie d'informations de l'application.
• L'utilisateur est plus susceptible d'avoir accédé à la page à partir d'une source externe.

Quand ne pas l'utiliser

• Comme principal moyen de naviguer dans une application ou un site.
• Pour les produits avec navigation à niveau unique.
• Pour aider les utilisateurs à suivre leur progression au cours d'un processus en plusieurs étapes. Utilisez plutôt l'un des composants de l'indicateur de progression.

Formatage

Structure

Le composant Barre de navigation se compose des éléments suivants :

1. Lien de texte : les barres de navigation apparaissent sous la forme d'un lien de texte actif bleu, comme les liens hypertextes. Elles dirigent les utilisateurs vers la page du niveau parent.
2. Séparateur de liens de texte : le séparateur marque la séparation entre les pages. Il utilise la même police que celle utilisée pour le lien de texte. Les séparateurs ne sont pas interactifs.
3. Élément actuel : élément de la barre de navigation pour la page que l'utilisateur consulte actuellement. S'affiche en texte brut.

Emplacement

Placez les barres de navigation dans la partie supérieure gauche de la page.

Meilleures pratiques

• Tous les éléments de la barre de navigation (à l'exception de la page actuelle) doivent représenter un emplacement accessible à l'utilisateur. S'il existe une catégorie logique qui n'a pas de page associée, ne l'incluez pas dans la barre de navigation.
• Les barres de navigation commencent généralement par la page d'accueil. Toutefois, si la navigation globale inclut un lien vers la page d'accueil, n'incluez pas le lien Accueil dans la barre de navigation.
• Les barres de navigation sont conçues pour refléter la structure hiérarchique du site et non l'historique des pages parcourues.
• Veillez à ce que tous les éléments d'une barre de navigation soient des liens actifs, à l'exception de la page actuelle.
• Sur les appareils mobiles, n'englobez pas les barres de navigation sur plusieurs lignes. Envisagez de raccourcir la barre de navigation pour inclure uniquement les derniers niveaux.

Source : Nielsen Norman Group

Contenu

Directives générales relatives à la rédaction

• Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
• Utilisez des verbes au présent et la forme active dans la plupart des cas.
• Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
• Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
• Utilisez des termes et des phrases concis.

Liens de page

• Les mots des liens de texte d'une barre de navigation doivent être précis et explicites, pas vagues.
• Les utilisateurs ne doivent jamais être surpris par ce qui apparaît une fois qu'ils ont cliqué ou appuyé sur un lien de texte.
• Les étiquettes des barres de navigation commencent par une majuscule.

Utilisez un étiquetage précis et spécifique.

N'utilisez pas d'étiquettes vagues ou ambiguës.

Comportements

• S'il n'y a qu'un seul élément à afficher, les barres de navigation n'apparaissent pas. Cela signifie que l'utilisateur est au niveau supérieur de la structure de navigation.
• S'il n'y a que deux éléments à afficher, le composant affiche un bouton Retour.
• Si le nombre d'éléments à afficher est supérieur à deux, le composant affiche les barres de navigation habituelles.

États

Les barres de navigation ont les mêmes états interactifs que le composant Lien.

Interactions

Clavier

Accédez aux liens à l'aide de la touche de tabulation. Activez le lien en appuyant sur la touche Entrée.

Lecteur d'écran

Le rôle aria de « navigation » et l'attribut aria-label='breadcrumb' sont inclus pour fournir davantage de contexte aux utilisateurs de lecteurs d'écran. De même, lorsque la case « lastItemClickable » est activée, le lien final de la barre de navigation adopte la valeur aria-current="page" pour identifier la page actuelle.

Accessibilité

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.

Reportez-vous aux conseils ci-dessous ainsi qu'aux bonnes pratiques de création conformément à la spécification WAI-ARIA dédiées aux barres de navigation. Voici les éléments à prendre à compte :

• La barre de navigation doit se trouver au même endroit sur chaque page.
• Le texte du lien doit être clair et compréhensible.

Code

<Breadcrumb
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Instruction d'importation

import { Breadcrumb } 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

backLinkWithoutText

Type

boolean

Description

If set to true, the back link renders as just an "arrow" icon. If set to false, it also includes the word "Back". The showTwoBreadcrumbs property takes precedence over this property.

className

Type

string

Description

CSS class name for this component.

lastItemClickable

Type

boolean

Description

If set to true, the last item in the breadcrumb is also a link.

links

Type

({text: IntlMessageShape, href: IntlMessageShape} & Link)[]

className

Type

string

Description

CSS class name for this component.

href

Type

IntlMessageShape

Description

URL or path for the link.

Link

Type

Link

Description

Additional properties from the Link component.

Description

Takes an array of objects, one per each link to be displayed.

renderLinkTrigger

Type

Link

Description

RenderProp function to generate each individual link that makes up the breadcrumbs. Uses the properties from the Link component.

showTwoBreadcrumbs

Type

boolean

Description

If set to true, breadcrumbs for both the parent and the current page are displayed if there are only two breadcrumbs. If set to false, the back link renders as an arrow with or without text depending on backLinkWithoutText.

Crochets

Aucun crochet n'est disponible pour breadcrumb.

Clés de traduction

Il n'existe aucune traduction pour breadcrumb.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

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 une barre de navigation et connaître les différentes options de configuration que nous proposons.

Exemple de base

Ajoutez un composant de navigation secondaire pour indiquer à l'utilisateur son emplacement actuel par rapport aux niveaux parent.

<Breadcrumb
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Exemple de dernier élément cliquable

Par défaut, le dernier élément n'est pas un lien cliquable, mais vous pouvez modifier ce comportement à l'aide de la propriété lastItemClickable.

<Breadcrumb
  lastItemClickable={true}
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      href: 'current-url',
      text: 'Current Page',
    },
  ]}
/>

Exemple de lien Retour

S'il n'y a qu'un seul élément parent, le composant s'affiche sous la forme d'un lien avec le texte « Retour » et une flèche orientée vers la gauche. La propriété showTwoBreadcrumbs prévaut sur cette propriété.

<Breadcrumb
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Exemple de lien Retour sans texte

S'il n'y a qu'un seul élément parent et que la propriété backLinkWithoutText est true, le composant s'affiche simplement sous la forme d'une flèche orientée vers la gauche. La propriété showTwoBreadcrumbs prévaut sur cette propriété.

<Breadcrumb
  backLinkWithoutText={true}
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Exemple d'affichage de deux barres de navigation

S’il y a exactement deux barres de navigation et que showTwoBreadcrumbs est défini sur true, le composant affiche à la fois la page parent et la page actuelle sous forme de barres de navigation cliquables. Si showTwoBreadcrumbs correspond à false, un lien de retour apparaît sous la forme d’une flèche, avec ou sans texte en fonction de backLinkWithoutText.

<Breadcrumb
  showTwoBreadcrumbs={true}
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      href: 'current-url',
      text: 'Current Page',
    },
  ]}
/>

Journal des modifications

10.12.0

La propriété showTwoBreadcrumbs a été ajoutée pour permettre l’affichage des deux liens de barre de navigation s’il n’y a que deux liens de barre de navigation : la page en cours et la page d’accueil. Auparavant, une flèche retour (avec ou sans texte) était toujours affichée.

10.9.0

• Une nouvelle fonctionnalité d'opt-in a été introduite pour désactiver la publication automatique des événements pour le composant Breadcrumb. Vous pouvez activer cette fonctionnalité en ajoutant JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true au fichier .env dans la racine de votre application Jutro. Lorsque cette option est activée, les composants hérités ne publient plus d'événements par défaut. Pour en savoir plus sur les événements et sur la façon d'en créer de nouveaux, reportez-vous à la documentation relative aux événements.

10.4.0

• La prise en charge des jetons de conception a été ajoutée.