> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-navigation.md).
# 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 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'actions rapides, 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 emplacements](/experience-cloud/experience-cloud-fr/premiers-pas/learning-the-basics.md#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 standard de Salesforce, il permet des structures de menus plus complexes. Vous pouvez créer des menus à plusieurs niveaux — pensez-y comme des couches ou des étapes. Par exemple, vous pouvez avoir des éléments principaux (niveau 1), des sous-éléments sous ceux-ci (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 avez bien plus que des options de couleur principale et de police. Avonni permet une personnalisation plus poussée, vous permettant de créer une expérience de navigation visuellement attrayante 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 traditionnelle en haut ou « vertical » pour une navigation de type barre latérale. |
| **`Afficher le logo du site`** | Activez pour afficher le logo du site dans le composant de navigation. |
| **`Fixé en haut`** | Activez pour conserver la barre de navigation en haut de la fenêtre d'affichage lorsque les utilisateurs font défiler la page. |
| **`Activer le menu mobile`** | Activez un menu optimisé pour mobile pour une meilleure 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 du menu, au lieu d'exiger 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`** | Affiche un petit graphique en forme de flèche pointant vers l'élément du menu lorsque son menu déroulant est ouvert. |
| **`Afficher l'indicateur d'élément`** | Activez pour afficher des indicateurs visuels signalant qu'il y a plus de contenu 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 traditionnelle en haut ou « vertical » pour une navigation de type barre latérale. |
| **`Description`** | Activez pour afficher le logo du site dans le composant de navigation. |
| **`Balise`** | Activez pour conserver la barre de navigation en haut de la fenêtre d'affichage lorsque les utilisateurs font défiler la page. |
| **`Info-bulle`** | Activez un menu optimisé pour mobile pour une meilleure 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 du menu, au lieu d'exiger 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`** | Affiche un petit graphique en forme de flèche pointant vers l'élément du menu lorsque son menu déroulant est ouvert. |
| **`Source de l'image de l'avatar`** | Activez pour afficher des indicateurs visuels signalant qu'il y a plus de contenu 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 le sous-élément renvoie.
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 correspondre au thème de votre site. |
| **`Largeur maximale du logo du site`** | Définissez la largeur maximale du logo du site pour assurer 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 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 des sous-éléments (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, le poids et l'ombre, y compris les paramètres de l'état au survol. |
| **`Dimensions du menu`** | Définissez la taille du menu, avec des paramètres de largeur et de hauteur min./max. |
| **`Largeur de colonne du menu`** | Définissez la largeur des colonnes dans le menu. |
| **`Espacement du menu (bloc/en ligne)`** | Ajustez l'espacement dans le 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 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 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, 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. |
| {% endtab %} | |
| {% endtabs %} | |
## Apparence du menu
La **`Variante de menu`** dans le composant Avonni Navigation pour Salesforce Experience Cloud détermine le style et le comportement globaux du menu.
{% hint style="info" %}
Si votre source de données est définie sur manuelle et que votre menu inclut des sous-éléments, vous pouvez utiliser la '**`Variante de menu`**' fonctionnalité.
{% endhint %}
Voici les significations typiques des variantes de menu :
### Base
La **`base`** représente le style standard d'un menu de navigation. Il est simple, avec des éléments de menu généralement listé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 recherché.
### Tiroir
La **`tiroir`** La variante implique un menu qui 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 permet de garder la navigation à l'écart 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 les **`colonnes`** la variante affiche les menus déroulants en colonnes, permettant une disposition structurée à plusieurs niveaux à l'intérieur même du menu déroulant. C'est particulièrement utile pour organiser une navigation complexe comportant de nombreux éléments ou catégories, ce qui facilite la consultation des options par les utilisateurs.
Exemple de variante colonnes
### Onglets
La **`onglets`** La variante convertit les éléments du 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 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
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-navigation.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.