> 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 bouton

## Aperçu

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

Utilisez-le pour regrouper des actions ou des options de navigation liées sous un seul bouton, comme les actions de compte utilisateur, les liens rapides, les options d’exportation ou les 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 en masse ou partout où vous avez besoin de plusieurs options sans encombrer la page avec des boutons séparés.

## Paramètres du menu de bouton

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 l’adapter 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 à l’ambiance de votre site.
* **Options :**
  * Neutre
  * Marque
  * Destructif (pour les 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 « Container » 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 l’endroit où le menu déroulant apparaît par rapport au bouton.
* **Options :**
  * Gauche
  * Droite
  * Centre
  * En 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 survol de la souris)
  * Focus (ouverture au focus du clavier)

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

### **Info-bulle**

* **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>

### **Ajuster à 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 voulez 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>

### **Nubbin du menu**

* Le nubbin du menu est un petit triangle subtil à côté des éléments de menu dans un menu de bouton.
* Il relie visuellement l’élément de menu au bouton qui ouvre le menu, guidant ainsi le regard de l’utilisateur.
* Cela aide les utilisateurs à identifier rapidement quel élément de 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 les 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 de 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 du bouton ici.

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

***

## **Paramètres d’apparence**

Ces paramètres vous permettent de personnaliser visuellement votre menu de bouton afin qu’il corresponde au design et à l’identité visuelle de votre site.

### **Espacement**

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

### **Libellé et icône**

* **Couleur :** Choisissez la couleur par défaut lorsque le bouton est actif (cliqué ou survolé), ainsi qu’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 :** Définissez le texte en léger, 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é.

### **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.

### **Bordure**

Choisissez la couleur par défaut lorsque le bouton est actif et la couleur de survol pour 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).

### **Image (pour les éléments du menu)**

* **Couleur de la 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.
* **Mise en forme :** Choisissez une mise en forme normale, 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).

## **Considérations importantes**

* **Mise en forme :** Personnalisez l’apparence et l’ambiance du menu de bouton pour qu’elles correspondent à l’identité visuelle 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-button-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.