> 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 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. {% 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 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. {% endhint %} ## 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. {% 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 fonctionnalité « **`Variante du menu`**». {% endhint %}
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 {% tabs %} {% tab title="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. | | {% endtab %} | | {% tab title="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. | | {% endtab %} | | {% tab title="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. | | {% endtab %} | | {% tab title="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. | | {% endtab %} | | {% tab title="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 %} | | --- # 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.