# 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 Experience Sites.
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 du menu, le style, les menus déroulants et les destinations des liens dans Experience Builder sans code.
Parfait 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.
{% hint style="danger" %}
Ce composant [utilise des slots](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/demarrage/apprendre-les-bases#understanding-slots) 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.
{% endhint %}
{% hint style="info" %}
Le composant Avonni Navigation est conçu avec une plus grande flexibilité à l’esprit. Contrairement à la navigation Salesforce standard, il permet des structures de menus 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 en dessous (niveau 2) et même des sous-sous-éléments (niveau 3). Cette approche en 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 une gamme plus large d’options de style. Cela vous permet de personnaliser de près l’apparence de votre menu de navigation pour l’aligner sur le style de votre marque. Vous n’avez pas seulement des options de couleur primaire et de police. Avonni permet une personnalisation plus poussée, vous permettant de créer une expérience de navigation visuellement attrayante et qui semble être une extension naturelle de votre marque.
{% endhint %}
## Propriétés
{% tabs %}
{% tab title="🎚️ Configuration générale" %}
| Nom | Description |
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Orientation`** | Choisissez entre « horizontal » pour une barre de navigation supérieure traditionnelle ou « vertical » pour une navigation de type barre latérale. |
| **`Afficher le logo du site`** | Activer pour afficher le logo du site dans le composant de navigation. |
| **`En-tête fixe`** | Activez cette option pour maintenir la barre de navigation en haut de la zone d’affichage pendant que les utilisateurs font défiler la page. |
| **`Activer le menu mobile`** | Activez un menu optimisé pour mobile afin d’améliorer la navigation sur les petits écrans. |
| **`Ouvrir le menu au survol`** | Configurez les menus déroulants pour qu’ils s’ouvrent lorsque l’utilisateur survole un élément de menu, plutôt que de nécessiter un clic. |
| **`Ombré`** | Ajoutez un léger effet d’ombrage à la barre de navigation pour donner de la profondeur visuelle. |
| **`Afficher la petite flèche du menu déroulant`** | Afficher un petit графique en forme de flèche pointant vers l’élément de menu lorsque son menu déroulant est ouvert. |
| **`Afficher l’indicateur d’élément`** | Activez cette option pour afficher des indicateurs visuels signalant qu’un contenu supplémentaire est disponible sous un élément de menu. |
| {% endtab %} | |
{% tab title="🗄️ Configuration de la source de données" %}
**Source de données manuelle :** Utilisez ceci pour créer votre structure de navigation, en définissant chaque élément et ses propriétés.
| Nom | Description |
| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **`Libellé`** | Choisissez entre « horizontal » pour une barre de navigation supérieure traditionnelle ou « vertical » pour une navigation de type barre latérale. |
| **`Description`** | Activer pour afficher le logo du site dans le composant de navigation. |
| **`Balise`** | Activez cette option pour maintenir la barre de navigation en haut de la zone d’affichage pendant que les utilisateurs font défiler la page. |
| **`Info-bulle`** | Activez un menu optimisé pour mobile afin d’améliorer la navigation sur les petits écrans. |
| **`Variante d’avatar`** | Configurez les menus déroulants pour qu’ils s’ouvrent lorsque l’utilisateur survole un élément de menu, plutôt que de nécessiter un clic. |
| **`Nom de l’icône de l’avatar`** | Ajoutez un léger effet d’ombrage à la barre de navigation pour donner de la profondeur visuelle. |
| **`Taille de l’icône de l’avatar`** | Afficher un petit графique en forme de flèche pointant vers l’élément de menu lorsque son menu déroulant est ouvert. |
| **`Source de l’image de l’avatar`** | Activez cette option pour afficher des indicateurs visuels signalant qu’un contenu supplémentaire est disponible sous un élément de menu. |
| **`Libellé des sous-éléments et sous-sous-éléments`** | Le texte affiché pour le sous-élément. |
| **`Lien vers des sous-éléments et sous-sous-éléments`** |
L’URL ou la page du site vers laquelle pointe le sous-élément.
Cela peut être imbriqué davantage en « sous-sous-éléments » avec les mêmes paramètres pour un niveau de profondeur supplémentaire
|
| {% endtab %} | |
{% tab title="🎨 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 survolé. |
| **`Libellé de l’élément`** | Nombreuses options de personnalisation du texte du libellé, notamment la couleur, la taille de police, la famille, l’épaisseur et l’ombre, avec des paramètres distincts pour les états actif et survolé. |
| **`Description de l’élément`** | Personnalisez la couleur du texte, la taille de police, la famille, l’épaisseur et l’ombre pour les descriptions des é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 du sous-élément (bloc/en ligne)`** | Ajustez l’espacement autour des sous-éléments. |
| **`Libellé du sous-élément`** | Options pour personnaliser la couleur du texte, la taille de police, la famille, l’épaisseur et l’ombre, y compris les paramètres de l’état 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 dans le 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 les couleurs pour les états normal, actif et survolé. |
| **`Libellé du groupe/de la colonne du menu`** | Nombreuses options de personnalisation du texte pour les libellés des groupes et des colonnes. |
### Style du menu tiroir
| Nom | Description |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| **`Couleur d’arrière-plan du tiroir`** | Paramètres différents pour l’élément ouvert et les couleurs d’arrière-plan secondaires. |
| **`Titre principal/secondaire du tiroir`** | Personnalisez la couleur du texte, la taille de police, la famille, l’épaisseur 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, l’épaisseur 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, l’épaisseur et l’ombre pour les descriptions dans le tiroir mobile. |
| {% endtab %} | |
| {% endtabs %} | |
## Apparence du menu
Le **`paramètre Variante de menu`** dans le composant Avonni Navigation pour Salesforce Experience Cloud détermine le style général et le comportement du menu.
{% hint style="info" %}
Si votre source de données est définie sur manuel et que votre menu comprend des sous-éléments, vous pouvez utiliser la fonctionnalité «**`paramètre Variante de menu`**».
{% endhint %}
Voici les significations typiques des variantes de menu :
### Base
Le **`base`** la variante représente le style standard d’un menu de navigation. Elle est simple, avec des éléments de menu généralement affichés sur une ligne pour une orientation horizontale ou sur une 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
Le **`tiroir`** La variante implique un menu qui coulisse depuis le côté, comme 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 permet de garder 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 mise en page structurée et multi-niveaux à l’intérieur même du menu déroulant. Cela est particulièrement utile pour organiser une navigation complexe avec de nombreux éléments ou catégories, facilitant ainsi la consultation des options par les utilisateurs.
Exemple de variante colonnes
### Onglets
Le **`onglets`** variante convertit les éléments de menu de premier niveau en navigation par 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 contribuer à 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.
