Composant Navigation (v1) navigation-component

Le composant Navigation permet aux utilisateurs de parcourir facilement une structure de site globalisée.

Utilisation usage

Les listes de composants de navigation répertorient une arborescence de pages afin que les utilisateurs d’un site puissent facilement naviguer dans la structure du site.

Le composant de navigation peut détecter automatiquement la structure de site globalisée de votre site et s’adapter automatiquement à une page localisée. En outre, elle peut prendre en charge toute structure arbitraire de site en utilisant des pages de redirection fantômes pour représenter une structure autre que la structure de contenu principale.

La boîte de dialogue de modification permet à l’auteur de contenu de définir la page racine de navigation ainsi que la profondeur de navigation. La boîte de dialogue de conception permet à l’auteur du modèle de définir les valeurs par défaut de la racine de navigation et de la profondeur.

Version et compatibilité version-and-compatibility

Ce document décrit la version v1 du composant Navigation, qui a été introduite avec la version 2.0.0 des composants principaux en janvier 2018.

Prise en charge de la structure de site localisée localized-site-structure

Souvent, les sites web sont proposés en plusieurs langues pour différentes zones géographiques. En règle générale, chaque page localisée contient un élément de navigation qui est inclus dans le modèle de page. Le composant de navigation permet de le placer une fois sur un modèle pour toutes les pages du site. Il s’adapte ensuite automatiquement aux pages localisées individuelles en fonction de la structure de site globalisée.

Exemple example-localization

Imaginons que votre contenu ressemble à ceci :

/content
+-- wknd
   +-- language-masters
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- es
      +-- fr
      \-- it
   +-- us
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      \-- es
   \-- ch
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

Pour le site WKND, il est probable que vous souhaitiez placer le composant Navigation dans un modèle de page incorporé à l’en-tête. Une fois qu’il fait partie du modèle, vous pouvez définir la racine de navigation du composant sur /content/wknd/language-masters/en puisque c’est là où commence le contenu principal de ce site. Il peut également être judicieux de définir la profondeur de la structure de navigation sur 2 puisque vous ne souhaitez probablement pas que l’intégralité de l’arborescence de contenu soit affichée par le composant, mais plutôt les deux premiers niveaux afin de servir d’aperçu.

Avec la valeur racine de navigation, le composant de navigation sait que la /content/wknd/language-masters/ennavigation démarre et qu’elle peut générer des options de navigation en effectuant une récurrence de la structure du site deux niveaux vers le bas (comme défini par la valeur de profondeur de la structure de navigation).

Quelle que soit la page localisée consultée par un utilisateur, le composant de navigation par langue est capable de trouver la page localisée correspondante en connaissant l’emplacement de la page actuelle et en remontant à la racine, puis en revenant à la page correspondante.

Ainsi, si un visiteur consulte /content/ch/de/experience/arctic-surfing-in-lofoten, le composant sait comment générer la structure de navigation sur la base de /content/wknd/language-masters/de. De même, si le visiteur consulte /content/us/en/experience/arctic-surfing-in-lofoten, le composant sait comment générer la structure de navigation en fonction de /content/wknd/language-masters/en.

Prise en charge de la structure de site fantôme shadow-structure

Parfois, il est nécessaire de créer un menu de navigation pour le visiteur différent de la structure réelle du site. Par exemple, une promotion peut mettre en surbrillance certains contenus du menu en réorganisant la liste du contenu. En utilisant des pages fantômes qui redirigent simplement vers d’autres pages de contenu, le composant de navigation peut générer n’importe quelle structure de navigation arbitraire nécessaire.

Pour ce faire, vous devez :

Le composant de navigation affichera alors le menu en fonction de la structure du site fantôme. Les liens rendus par le composant correspondent aux pages de contenu réelles vers lesquelles les pages fantômes redirigent et non les pages fantômes elles-mêmes. En outre, le composant affiche les noms des pages réelles et met correctement en surbrillance la page active, même lorsque la navigation est basée sur des pages fantômes. Le composant de navigation rend les pages fantômes complètement transparentes pour le visiteur.

Redirections dans la navigation redirects

Lorsqu’une page a une cible de redirection (et ce, qu’elle pointe vers une URL externe ou vers une autre page AEM), un composant de navigation contenant des liens vers cette cible pointe directement vers l’URL de la cible de redirection.

Exemple redirect-example

Exemple de sortie de composant sample-component-output

Pour tester le composant de navigation et obtenir des exemples d’options de configuration, ainsi que des sorties HTML et JSON, consultez la Bibliothèque de composants.

Détails techniques technical-details

La documentation technique la plus récente sur le composant de navigation se trouve sur GitHub.

Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux.

Boîte de dialogue de modification edit-dialog

Dans la boîte de dialogue de modification, l’auteur du contenu peut définir la page racine pour la navigation et la profondeur de la structure de navigation.

Onglet Propriétés properties-tab

Onglet Accessibilité accessibility-tab

Dans l’onglet Accessibilité, les valeurs peuvent être définies pour les étiquettes d’accessibilité ARIA du composant.

Boîte de dialogue de conception design-dialog

La boîte de dialogue de conception permet à l’auteur du modèle de définir les valeurs par défaut de la page racine de navigation et de la profondeur de navigation présentée aux auteurs de contenu.

Onglet Propriétés properties-tab-design

Onglet Styles styles-tab

Le composant de navigation prend en charge le système de style AEM.

Couche de données client Adobe data-layer

Le composant Navigation prend en charge la couche de données client Adobe.