> 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-it/experience-components/ax-button-menu.md).

# AX - Menu a pulsante

## Panoramica

**AX - Menu a pulsante** è un componente di Experience Cloud che mostra un menu a discesa quando gli utenti fanno clic su un pulsante nelle pagine di Experience Sites.

Usalo per raggruppare azioni correlate o opzioni di navigazione sotto un unico pulsante, come azioni dell'account utente, collegamenti rapidi, opzioni di esportazione o azioni sui record. Configura gli elementi del menu manualmente oppure estraili dinamicamente dai dati di Salesforce in Experience Builder.

Perfetto per la navigazione compatta, i menu di overflow, le azioni del profilo utente, le operazioni in blocco o ovunque tu abbia bisogno di più opzioni senza ingombrare la pagina con pulsanti separati.

## Impostazioni del menu a pulsante

Il componente Menu a pulsante ti consente di creare un menu a discesa attivato da un clic sul pulsante. Ecco come puoi personalizzarlo in base alle esigenze del tuo sito:

### **Etichetta**

* **Cosa fa:** Imposta il testo che appare sul pulsante.
* **Esempio:** "Navigazione", "Azioni", "Scopri di più."

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

### **Icona**

* **Cosa fa:** Aggiunge un'icona visiva al pulsante.
* **Come usarlo:** Scegli tra le icone disponibili nel Lightning Design System.
* **Opzionale:** Puoi lasciarlo vuoto se non desideri un'icona.

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

### **Stile del pulsante**

* **Cosa fa:** Modifica l'aspetto del pulsante per adattarlo allo stile del tuo sito.
* **Opzioni:**
  * Neutro
  * Brand
  * Distruttivo (per azioni come l'eliminazione)
  * Riuscito (per azioni positive)
  * Altro...

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

Regolare le impostazioni dell'aspetto ti consente di personalizzare ancora di più l'aspetto del pulsante. Ad esempio, puoi scegliere la variante "Contenitore" per modificare il colore di sfondo del pulsante a tuo piacimento oppure selezionare il token di colore predefinito per il tuo sito.

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

### **Allineamento del menu**

* **Cosa fa:** Determina dove appare il menu a discesa rispetto al pulsante.
* **Opzioni:**
  * Sinistra
  * Destra
  * Centro
  * In basso a sinistra
  * Altro...

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

### **Attivazione del menu**

* **Cosa fa:** Controlla come si apre il menu.
* **Opzioni:**
  * Clic
  * Passaggio del mouse (apre al passaggio del mouse)
  * Focus (apre quando riceve il focus da tastiera)

<figure><img src="/files/5fbd30b16de188921ec112f94b79588fe05d6a63" alt=""><figcaption><p>Attivazione del menu impostata su Passaggio del mouse</p></figcaption></figure>

### **Suggerimento**

* **Cosa fa:** Mostra informazioni utili quando gli utenti passano il mouse sul pulsante.
* **Opzionale:** Lascia vuoto se non è necessaria alcuna spiegazione aggiuntiva.

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

### **Nascondi freccia verso il basso**

* **Cosa fa:** Rimuove la freccia rivolta verso il basso che in genere viene mostrata sui pulsanti di menu.
* **Opzionale:** Seleziona questa casella se preferisci un aspetto più pulito.

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

### **Estendi a tutta larghezza**

* **Cosa fa:** Fa espandere il pulsante fino a occupare tutta la larghezza disponibile.
* **Opzionale:** Seleziona questa casella se desideri un pulsante più grande.

### **Disabilita pulsante**

* **Cosa fa:** Rende temporaneamente inutilizzabili il pulsante e il menu.
* **Opzionale:** Seleziona questa casella per impedire agli utenti di interagire con esso.,

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

### **Nubbin del menu**

* Il nubbin del menu è un piccolo triangolo discreto accanto agli elementi del menu all'interno di un menu a pulsante.
* Collega visivamente l'elemento del menu al pulsante che apre il menu, guidando lo sguardo dell'utente.
* Questo aiuta gli utenti a identificare rapidamente quale elemento del menu è associato a un determinato pulsante, migliorando l'esperienza complessiva dell'utente.

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

### **Elementi del menu**

* **Cosa fa:** Definisce i collegamenti o le azioni nel menu a discesa.
* **Come usarlo:** Aggiungi elementi con etichette (il testo visualizzato) e un'icona, se necessario.

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

#### Imposta la navigazione dell'elemento

Per rendere interattivo il tuo menu a pulsante, dovrai indicare a ciascun elemento del menu dove andare quando qualcuno fa clic su di esso. Questo viene fatto nella sezione "Collega a". Puoi saperne di più sui [diversi tipi di azioni](/experience-cloud/experience-cloud-it/tutorial/interactions.md) che puoi attivare dal menu a pulsante qui.

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

***

## **Impostazioni dell'aspetto**

Queste impostazioni ti consentono di personalizzare visivamente il menu a pulsante per abbinarlo al design e al branding del tuo sito.

### **Spaziatura**

* **Cosa fa:** Controlla lo spazio intorno al pulsante.
* **Come usarlo:** Usa i cursori o i campi numerici per regolare i valori di spaziatura superiore, inferiore, sinistra e destra.

### **Etichetta e icona**

* **Colore:** Scegli il colore predefinito quando il pulsante è attivo (cliccato o con il puntatore sopra) e un colore al passaggio del mouse.
* **Famiglia di caratteri:** Seleziona il carattere per il testo dell'etichetta (ad es. Arial, Times New Roman, Verdana).
* **Dimensione del carattere:** Regola la dimensione del testo dell'etichetta usando un cursore o un input numerico.
* **Stile del carattere:** Scegli testo normale, corsivo o obliquo.
* **Peso del carattere:** Rendi il testo leggero, normale, medio, grassetto o extra grassetto.
* **Allineamento orizzontale:** Decidi se l'icona deve trovarsi a sinistra o a destra del testo dell'etichetta.

### **Sfondo**

* **Colore:** Scegli il colore predefinito per lo sfondo del pulsante quando è attivo e il colore al passaggio del mouse quando è inattivo.

### **Bordo**

Scegli il colore predefinito quando il pulsante è attivo e il colore al passaggio del mouse per il bordo intorno al pulsante.

* **Dimensione:** Regola lo spessore del bordo usando un cursore o un input numerico.
* **Stile:** Scegli tra un bordo pieno, tratteggiato, puntinato o doppio.
* **Raggio:** Puoi regolare l'arrotondamento degli angoli usando un cursore o un input numerico (un valore più alto rende gli angoli più arrotondati).

### **Immagine (per gli elementi del menu)**

* **Colore del bordo:** Scegli il colore del bordo attorno alle immagini degli elementi del menu (se ne hanno uno).
* **Dimensione:** Regola la dimensione delle immagini degli elementi del menu usando un cursore o un input numerico.
* **Stile:** Scegli uno stile normale, corsivo o obliquo per le didascalie delle immagini (se presenti).
* **Raggio:** Regola l'arrotondamento degli angoli delle immagini degli elementi del menu usando un cursore o un input numerico.
* **Adattamento oggetto:** Decidi come l'immagine deve adattarsi al suo contenitore (ad es. riempire, contenere, coprire).

## **Considerazioni importanti**

* **Stile:** Personalizza l'aspetto e lo stile del menu a pulsante per abbinarlo al branding del tuo sito.
* **Collega a:** Valuta di aggiungere l'interazione "Collega a" per gestire le interazioni degli utenti con gli elementi del 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-it/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.