AX - Navigation

Aperçu

AX - Navigation est un composant Experience Cloud qui affiche une barre de navigation personnalisable avec des liens et des menus sur les pages des sites Experience.

Utilisez-le pour créer des structures de navigation personnalisées au-delà de la navigation standard d’Experience Cloud — comme des menus secondaires, une navigation contextuelle ou des groupes de liens spécifiques à une action. Configurez les éléments de menu, le style, les listes déroulantes et les destinations des liens dans Experience Builder sans code.

Idéal pour la navigation personnalisée des pages, les menus contextuels, les liens d’action rapide ou partout où votre portail a besoin d’une navigation au-delà de l’en-tête de site par défaut.

Ce composant utilise des emplacements pour une personnalisation avancée, ce qui le rend idéal pour les sites LWR. Les sites Aura ne prennent pas en charge ce niveau de personnalisation.

Le composant Avonni Navigation est conçu dans une optique de plus grande flexibilité. Contrairement à la navigation Salesforce standard, il permet des structures de menu plus complexes. Vous pouvez créer des menus à plusieurs niveaux – imaginez-les comme des couches ou des étapes. Par exemple, vous pouvez avoir des éléments principaux (niveau 1), des sous-éléments dessous (niveau 2) et même des sous-sous-éléments (niveau 3). Cette approche par couches facilite l’organisation et la présentation d’une grande quantité d’informations de manière structurée et accessible.

De plus, Avonni offre un éventail plus large d’options de style. Cela vous permet de personnaliser de près l’apparence de votre menu de navigation pour l’adapter au style de votre marque. Vous disposez de bien plus que de simples options de couleur principale et de police. Avonni permet une personnalisation plus poussée, vous donnant la possibilité de créer une expérience de navigation visuellement attrayante et qui ressemble à une extension naturelle de votre marque.

Configuration

Configuration générale

Orientation choisit horizontal (une barre de navigation supérieure traditionnelle) ou vertical (navigation de type barre latérale).

Afficher le logo du site active ou désactive l’affichage du logo du site dans le composant de navigation.

En haut fixe maintient la barre de navigation en haut de la fenêtre lorsque les utilisateurs font défiler la page.

Activer le menu mobile active un menu optimisé pour mobile afin d’améliorer la navigation sur les petits écrans.

Ouvrir le menu au survol ouvre les menus déroulants lorsque l’utilisateur survole un élément de menu, au lieu d’exiger un clic.

Ombré ajoute un léger effet d’ombre à la barre de navigation pour donner de la profondeur visuelle.

Afficher le repère du menu déroulant affiche un petit graphique en forme de flèche qui pointe vers l’élément de menu lorsque son menu déroulant est ouvert.

Afficher l’indicateur d’élément affiche des indicateurs visuels signalant qu’un contenu supplémentaire est disponible sous un élément de menu ; Attributs de l’indicateur contrôlent la position de cet indicateur (avant ou après l’élément).

Nom de l'API est un identifiant unique utilisé pour référencer le composant. Variante du menu mobile choisit la façon dont le menu s’affiche sur les petits écrans (tiroir ou menu déroulant), et Lien vers le logo du site définit une interaction déclenchée lorsque le logo du site est cliqué.

Source de données

Utilisez la Source de données manuelle pour créer votre structure de navigation, en définissant chaque élément et ses propriétés :

Libellé est le texte affiché pour l’élément, et Description est un texte secondaire facultatif affiché avec celui-ci.

Étiquette ajoute un petit badge à l’élément, et Infobulle définit le texte affiché au survol.

Variante de l’avatar, Nom de l’icône de l’avatar, Taille de l’icône de l’avatar, et Source de l’image de l’avatar configurez un avatar facultatif sur l’élément — sa forme, son icône de secours, sa taille et sa source d’image.

Libellé des sous-éléments et des sous-sous-éléments est le texte affiché pour un sous-élément, et Lien des sous-éléments et des sous-sous-éléments vers est l’URL ou la page du site vers laquelle il renvoie. Les éléments peuvent être imbriqués à un niveau supplémentaire en « sous-sous-éléments » avec les mêmes paramètres.

Apparence du menu

La Variante du menu dans le composant Avonni Navigation pour Salesforce Experience Cloud détermine le style et le comportement globaux du menu.

Si votre source de données est définie sur manuelle et que votre menu inclut des sous-éléments, vous pouvez utiliser la fonctionnalité « Variante du menu».

Voici les significations typiques des variantes du menu :

Base

La de base représente le style standard d’un menu de navigation. Il est simple, avec des éléments de menu généralement affichés sur une ligne pour une orientation horizontale ou en colonne pour une orientation verticale. Cette variante est épurée et minimaliste, ce qui en fait un bon choix pour la plupart des sites où un aspect classique est souhaité.

Tiroir

La tiroir La variante implique un menu qui se glisse depuis le côté, à la manière d’un tiroir ouvert. Ce style est souvent utilisé pour les menus verticaux, en particulier dans les vues mobiles ou lorsque l’espace à l’écran est limité. Il garde la navigation discrète et accessible via une icône de menu (souvent une icône hamburger) jusqu’à ce qu’elle soit nécessaire.

Exemple de variante tiroir

Colonnes

Avec la variante colonnes les menus déroulants sont affichés en colonnes, ce qui permet une disposition structurée et multiniveau à l’intérieur même du menu déroulant. C’est particulièrement utile pour organiser une navigation complexe avec de nombreux éléments ou catégories, en facilitant l’exploration des options par les utilisateurs.

Exemple de variante colonnes

Onglets

La onglets La variante transforme les éléments de menu de premier niveau en navigation à onglets. Ce style est souvent utilisé lorsque différentes sections d’un site doivent être délimitées et accessibles directement depuis la barre de navigation. Il offre une interface familière aux utilisateurs, similaire aux onglets d’un classeur ou d’un navigateur web.

Chacune de ces variantes peut aider à définir l’expérience de navigation de votre site, il est donc important d’en choisir une qui s’aligne sur les principes de conception de votre site et améliore le parcours utilisateur.

Exemple de variante onglets

Style

Paramètres généraux de navigation

Nom	Description
Taille	Personnalisez les dimensions globales du menu de navigation.
Couleur d'arrière-plan	Définissez la couleur d’arrière-plan pour l’adapter au thème de votre site.
Largeur maximale du logo du site	Définissez la largeur maximale du logo du site pour une image de marque cohérente.
Taille/couleur de la bordure inférieure	Personnalisez la taille et la couleur de la bordure inférieure pour un rendu distinctif.

Paramètres des éléments de navigation

Nom	Description
Largeur de l’élément, largeur min./max.	Spécifiez les dimensions de largeur pour chaque élément de navigation.
Couleur d’arrière-plan de l’élément	Définissez différentes couleurs d’arrière-plan pour les états actif et au survol.
Libellé de l’élément	Options de personnalisation étendues pour le texte du libellé, notamment la couleur, la taille de police, la famille, le poids et l’ombre, avec des paramètres distincts pour les états actif et au survol.
Description de l’élément	Personnalisez la couleur du texte, la taille de police, la famille, le poids et l’ombre pour les descriptions d’éléments.
Bordure de l’élément	Ajustez la taille et la couleur de la bordure avec des paramètres supplémentaires pour l’état actif.

Style des sous-éléments et du menu

Nom	Description
Couleur d’arrière-plan du sous-élément (sélectionné)	Choisissez une couleur d’arrière-plan pour les sous-éléments sélectionnés.
Espacement des sous-éléments (bloc/en ligne)	Ajustez l’espacement autour des sous-éléments.
Libellé du sous-élément	Options de personnalisation du texte pour la couleur, la taille de police, la famille, le poids et l’ombre, y compris les paramètres d’état au survol.
Dimensions du menu	Définissez la taille du menu, avec des paramètres de largeur/hauteur min. et max.
Largeur de colonne du menu	Définissez la largeur des colonnes du menu.
Espacement du menu (bloc/en ligne)	Ajustez l’espacement à l’intérieur du menu.
Bordure du menu	Personnalisez la couleur, la taille, le style et le rayon de la bordure du menu.
Icône du menu	Définissez des couleurs pour les états normal, actif et au survol.
Libellé du groupe / de la colonne du menu	Options étendues de personnalisation du texte pour les libellés de groupe et de colonne.

Style du menu tiroir

Nom	Description
Couleur d’arrière-plan du tiroir	Paramètres distincts pour la couleur d’arrière-plan de l’élément ouvert et la couleur d’arrière-plan secondaire.
Titre principal/secondaire du tiroir	Personnalisez la couleur du texte, la taille de police, la famille, le poids et l’ombre pour les titres principaux et secondaires.
Description secondaire du tiroir	Options pour la couleur du texte, la taille de police, la famille, le poids et l’ombre.

Style du tiroir mobile

Nom	Description
Titre principal/secondaire du tiroir mobile	Options de personnalisation similaires à celles du tiroir de bureau, adaptées à l’affichage mobile.
Description secondaire du tiroir mobile	Ajustez la couleur du texte, la taille de police, la famille, le poids et l’ombre pour les descriptions dans le tiroir mobile.