> 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-button-menu.md).

# AX - Menu de boutons

## Aperçu

**AX - Menu de bouton** est un composant Experience Cloud qui affiche un menu déroulant lorsque les utilisateurs cliquent sur un bouton dans les pages Experience Sites.

Utilisez-le pour regrouper des actions ou des options de navigation associées sous un seul bouton — comme des actions de compte utilisateur, des liens rapides, des options d’exportation ou des actions sur les enregistrements. Configurez les éléments du menu manuellement ou récupérez-les dynamiquement à partir des données Salesforce dans Experience Builder.

Idéal pour une navigation compacte, des menus de débordement, des actions de profil utilisateur, des opérations groupées ou partout où vous avez besoin de plusieurs options sans encombrer la page avec des boutons séparés.

## Configuration

Le composant Menu de bouton vous permet de créer un menu déroulant déclenché par un clic sur un bouton. Voici comment le personnaliser pour répondre aux besoins de votre site :

### **Libellé**

* **Ce qu’il fait :** Définit le texte qui apparaît sur le bouton.
* **Exemple :** « Navigation », « Actions », « En savoir plus ».

<figure><img src="/files/e70cebd9f24ea885485ecae0450a2501f9187a03" alt="" width="375"><figcaption></figcaption></figure>

### **Icône**

* **Ce qu’il fait :** Ajoute une icône visuelle au bouton.
* **Comment l’utiliser :** Choisissez parmi les icônes disponibles dans le Lightning Design System.
* **Facultatif :** Vous pouvez laisser ce champ vide si vous ne souhaitez pas d’icône.

<figure><img src="/files/24f8be713386b7d490721cbf32a223711d2e68ba" alt="" width="375"><figcaption></figcaption></figure>

### **Style du bouton**

* **Ce qu’il fait :** Modifie l’apparence du bouton pour l’adapter à l’aspect et au style de votre site.
* **Options :**
  * Neutre
  * Marque
  * Destructif (pour des actions comme la suppression)
  * Succès (pour les actions positives)
  * Plus...

<figure><img src="/files/aa9f8ae83a8d21eadc4347052b7a689287dd17d6" alt="" width="375"><figcaption></figcaption></figure>

L’ajustement des paramètres d’apparence vous permet de personnaliser encore davantage l’aspect de votre bouton. Par exemple, vous pouvez choisir la variante « Conteneur » pour modifier la couleur d’arrière-plan du bouton selon vos préférences ou sélectionner le jeton de couleur prédéfini pour votre site.

<figure><img src="/files/8b6488681e3f0c078144098dc946af015f970b7d" alt="" width="375"><figcaption></figcaption></figure>

### **Alignement du menu**

* **Ce qu’il fait :** Détermine où le menu déroulant apparaît par rapport au bouton.
* **Options :**
  * Gauche
  * Droite
  * Centre
  * Bas gauche
  * Plus...

<figure><img src="/files/6ded775d29ad079a719bca94ffc8090f3ac12322" alt="" width="375"><figcaption></figcaption></figure>

### **Déclencheur du menu**

* **Ce qu’il fait :** Contrôle la manière dont le menu s’ouvre.
* **Options :**
  * Clic
  * Survol (ouverture au passage de la souris)
  * Focus (ouverture lors du focus clavier)

<figure><img src="/files/825c87627dee34896f6ca45eb16ee72edcb2bfd7" alt=""><figcaption><p>Déclencheur du menu défini sur Survol</p></figcaption></figure>

### **Infobulle**

* **Ce qu’il fait :** Affiche des informations utiles lorsque les utilisateurs survolent le bouton.
* **Facultatif :** Laissez vide si aucune explication supplémentaire n’est nécessaire.

<figure><img src="/files/b4da19d461d7182c33a680cc5d88adbcfb33c63c" alt="" width="375"><figcaption></figcaption></figure>

### **Masquer la flèche vers le bas**

* **Ce qu’il fait :** Supprime la flèche pointant vers le bas généralement affichée sur les boutons de menu.
* **Facultatif :** Cochez cette case si vous préférez un aspect plus épuré.

<figure><img src="/files/e8b75d95b3219243944bcdf14d43462f1be65c22" alt="" width="375"><figcaption></figcaption></figure>

### **Étendre à toute la largeur**

* **Ce qu’il fait :** Fait en sorte que le bouton s’étende pour occuper toute la largeur disponible.
* **Facultatif :** Cochez cette case si vous souhaitez un bouton plus grand.

### **Désactiver le bouton**

* **Ce qu’il fait :** Rend temporairement le bouton et le menu inutilisables.
* **Facultatif :** Cochez cette case pour empêcher les utilisateurs d’interagir avec lui.,

<figure><img src="/files/d4a75c6594dced8bfe41d735d50cf3e4c36319d0" alt="" width="375"><figcaption></figcaption></figure>

### **Triangle de menu**

* Le triangle de menu est un petit triangle discret situé à côté des éléments de menu dans un menu de bouton.
* Il relie visuellement l’élément du menu au bouton qui ouvre le menu, guidant ainsi le regard de l’utilisateur.
* Cela aide les utilisateurs à identifier rapidement quel élément du menu est associé à un bouton particulier, améliorant ainsi l’expérience utilisateur globale.

<figure><img src="/files/1e02970cc8ddf3df8c0cf4f9a367c3c8f4476d23" alt="" width="375"><figcaption></figcaption></figure>

### **Éléments du menu**

* **Ce qu’il fait :** Définit les liens ou actions dans le menu déroulant.
* **Comment l’utiliser :** Ajoutez des éléments avec des libellés (le texte affiché) et une icône si nécessaire.

<figure><img src="/files/56c2cafb18dc2fbe853bbf26cf225fff975d65ea" alt="" width="375"><figcaption></figcaption></figure>

#### Définir la navigation de l’élément

Pour rendre votre menu de bouton interactif, vous devrez indiquer à chaque élément du menu où aller lorsqu’une personne clique dessus. Cela se fait dans la section « Lien vers ». Vous pouvez en savoir plus sur les [différents types d’actions](/experience-cloud/experience-cloud-fr/tutoriels/interactions.md) que vous pouvez déclencher depuis le menu de bouton ici.

<figure><img src="/files/c67fc3c93b0ae18adaf148b9dba512bceeaaf5e1" alt="" width="375"><figcaption></figcaption></figure>

### Paramètres supplémentaires

**Taille de l’icône** définit la taille de l’icône du bouton, et **Source de l’icône CMS** / **URL de l’icône ou expression** vous permettent d’utiliser une image CMS ou une URL comme icône au lieu d’une icône Lightning Design System.

**Longueur du menu** définit combien d’éléments sont visibles avant que le menu déroulant ne fasse défiler (`5 éléments`, `7 éléments`, `10 éléments`), et **Masquer la coche** masque la coche affichée à côté d’un élément sélectionné.

**Autoriser la recherche** ajoute un champ de recherche dans le menu déroulant, avec **Texte indicatif du champ de recherche** définissant son texte indicatif.

**Valeur** définit l’élément sélectionné par défaut, et **Alignement horizontal** positionne le bouton dans son conteneur (`à gauche`, `au centre`, `à droite`).

**Titre** définit le texte de l’infobulle du bouton, et **Texte alternatif** fournit un texte accessible pour un bouton composé uniquement d’une icône. **Est un brouillon** affiche un indicateur de brouillon sur le bouton, avec **Texte alternatif du brouillon** expliquant pourquoi il s’affiche.

## Style

Ces paramètres vous permettent de personnaliser visuellement votre menu de bouton pour l’adapter au design et à l’image de marque de votre site.

{% tabs %}
{% tab title="Espacement" %}

* **Ce qu’il fait :** Contrôlez l’espace autour du bouton.
* **Comment l’utiliser :** Utilisez les curseurs ou les champs numériques pour ajuster les valeurs d’espacement en haut, en bas, à gauche et à droite.
  {% endtab %}

{% tab title="Libellé et icône" %}

* **Couleur :** Choisissez la couleur par défaut lorsque le bouton est actif (cliqué ou survolé) et une couleur de survol.
* **Famille de police :** Sélectionnez la police du texte du libellé (par exemple, Arial, Times New Roman, Verdana).
* **Taille de police :** Ajustez la taille du texte du libellé à l’aide d’un curseur ou d’un champ numérique.
* **Style de police :** Choisissez un texte normal, italique ou oblique.
* **Graisse de police :** Rendez le texte fin, normal, moyen, gras ou très gras.
* **Alignement horizontal :** Décidez si l’icône doit se trouver à gauche ou à droite du texte du libellé.
  {% endtab %}

{% tab title="Arrière-plan" %}

* **Couleur :** Choisissez la couleur par défaut de l’arrière-plan du bouton lorsqu’il est actif et la couleur de survol lorsqu’il est inactif.
  {% endtab %}

{% tab title="Bordure" %}
Choisissez la couleur par défaut lorsque le bouton est actif et la couleur de survol de la bordure autour du bouton.

* **Taille :** Ajustez l’épaisseur de la bordure à l’aide d’un curseur ou d’un champ numérique.
* **Style :** Choisissez entre une bordure pleine, en tirets, en pointillés ou double.
* **Rayon :** Vous pouvez ajuster l’arrondi des coins à l’aide d’un curseur ou d’un champ numérique (une valeur plus élevée rend les coins plus arrondis).
  {% endtab %}

{% tab title="Image (pour les éléments du menu)" %}

* **Couleur de bordure :** Choisissez la couleur de la bordure autour des images des éléments du menu (si elles en ont une).
* **Taille :** Ajustez la taille des images des éléments du menu à l’aide d’un curseur ou d’un champ numérique.
* **Style :** Choisissez un style normal, italique ou oblique pour les légendes d’image (le cas échéant).
* **Rayon :** Ajustez l’arrondi des coins des images des éléments du menu à l’aide d’un curseur ou d’un champ numérique.
* **Ajustement de l’objet :** Décidez comment l’image doit s’adapter à son conteneur (par exemple, remplir, contenir, couvrir).
  {% endtab %}
  {% endtabs %}

## **Points importants à considérer**

* **Style :** Personnalisez l’apparence et le style du menu de bouton pour qu’ils correspondent à l’image de marque de votre site.
* **Lien vers :** Envisagez d’ajouter une interaction « Lien vers » pour gérer les interactions des utilisateurs avec les éléments du menu.


---

# 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-button-menu.md?ask=<question>&goal=<endgoal>
```

`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.