AX - Menu de boutons
Aperçu
AX - Menu 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 connexes 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 de menu manuellement ou récupérez-les dynamiquement à partir des données Salesforce dans Experience Builder.
Parfait pour une navigation compacte, les menus de débordement, les actions de profil utilisateur, les 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 Bouton
Le composant Menu Bouton vous permet de créer un menu déroulant déclenché par un clic sur un bouton. Voici comment vous pouvez le personnaliser pour répondre aux besoins de votre site :
Étiquette
Ce que cela fait : Définit le texte qui apparaît sur le bouton.
Exemple : "Navigation", "Actions", "En savoir plus."
Icône
Ce que cela fait : Ajoute une icône visuelle au bouton.
Comment l'utiliser : Choisissez parmi les icônes disponibles dans le Lightning Design System.
Optionnel : Vous pouvez laisser ceci vide si vous ne souhaitez pas d'icône.
Style du bouton
Ce que cela fait : Change l'apparence du bouton pour correspondre à l'aspect et à la convivialité de votre site.
Options :
Neutre
Marque
Destructif (pour des actions comme la suppression)
Succès (pour les actions positives)
Plus...
L'ajustement des paramètres d'apparence vous permet de personnaliser encore plus l'aspect de votre bouton. Par exemple, vous pouvez choisir la variante "Conteneur" pour changer 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.
Alignement du menu
Ce que cela fait : Détermine où le menu déroulant apparaît par rapport au bouton.
Options :
Gauche
Droite
Centre
Bas-Gauche
Plus...
Déclencheur de menu
Ce que cela fait : Contrôle la façon dont le menu s'ouvre.
Options :
Clic
Survol (ouverture au survol de la souris)
Focus (ouverture au focus clavier)
Infobulle
Ce que cela fait : Affiche des informations utiles lorsque les utilisateurs survolent le bouton.
Optionnel : Laisser vide si aucune explication supplémentaire n'est nécessaire.
Masquer la flèche vers le bas
Ce que cela fait : Supprime la flèche pointant vers le bas généralement affichée sur les boutons de menu.
Optionnel : Cochez cette case si vous préférez un look plus épuré.
Étendre sur toute la largeur
Ce que cela fait : Fait en sorte que le bouton s'étende pour occuper toute la largeur disponible.
Optionnel : Cochez cette case si vous souhaitez un bouton plus grand.
Désactiver le bouton
Ce que cela fait : Rend temporairement le bouton et le menu inutilisables.
Optionnel : Cochez cette case pour empêcher les utilisateurs d'interagir avec lui.
Nubbin du menu
Le nubbin du menu est un petit triangle subtil à côté des éléments du menu dans un menu bouton.
Il relie visuellement l'élément de menu au bouton qui ouvre le menu, guidant le regard de l'utilisateur.
Cela aide les utilisateurs à identifier rapidement quel élément de menu est associé à un bouton particulier, améliorant l'expérience utilisateur globale.
Éléments de menu
Ce que cela fait : Définit les liens ou actions dans le menu déroulant.
Comment l'utiliser : Ajoutez des éléments avec des étiquettes (le texte affiché) et une icône si nécessaire.
Définir la navigation de l'élément
Pour rendre votre menu bouton interactif, vous devrez indiquer à chaque élément de menu où aller lorsqu'on clique dessus. Cela se fait dans la section "Lien vers". Vous pouvez en savoir plus sur les différents types d'actions que vous pouvez déclencher depuis le menu bouton ici.
Paramètres d'apparence
Ces paramètres vous permettent de personnaliser visuellement votre menu bouton pour qu'il corresponde au design et à l'identité de votre site.
Espacement
Ce que cela 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 haut, bas, gauche et correctes.
Étiquette & Icône
Couleur : Choisissez la couleur par défaut lorsque le bouton est actif (cliqué ou survolé), et une couleur au survol.
Famille de polices : Sélectionnez la police pour le texte de l'étiquette (par ex., Arial, Times New Roman, Verdana).
Taille de la police : Ajustez la taille du texte de l'étiquette à l'aide d'un curseur ou d'un champ numérique.
Style de police : Choisissez normal, italique ou oblique.
Épaisseur de la police : Rendez le texte léger, normal, moyen, gras ou extra-gras.
Alignement horizontal : Décidez si l'icône doit être à gauche ou à droite du texte de l'étiquette.
Arrière-plan
Couleur : Choisissez la couleur par défaut pour l'arrière-plan du bouton lorsqu'il est actif et la couleur au survol lorsqu'il est inactif.
Bordure
Choisissez la couleur par défaut lorsque le bouton est actif et la couleur au 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'arrondissement 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 de menu)
Couleur de la bordure : Choisissez la couleur de la bordure autour des images des éléments de menu (si elles en ont une).
Taille : Ajustez la taille des images des éléments de 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'arrondissement des coins des images des éléments de 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 ex., remplir, contenir, recouvrir).
Considérations importantes
Style : Personnalisez l'apparence du menu bouton pour qu'elle corresponde à 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.
Mis à jour
Ce contenu vous a-t-il été utile ?