# AX - Button Menu

## Panoramica

**AX - Menu a pulsante** è un componente di Experience Cloud che visualizza un menu a discesa quando gli utenti cliccano un pulsante nelle pagine dei siti Experience.

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 o estraili dinamicamente dai dati di Salesforce in Experience Builder.

Perfetto per una navigazione compatta, menu di overflow, azioni del profilo utente, operazioni in blocco o qualsiasi luogo in cui hai bisogno di più opzioni senza ingombrare la pagina con pulsanti separati.

## Impostazioni del menu a pulsante

Il componente Menu a pulsante ti permette di creare un menu a discesa attivato dal click su un pulsante. Ecco come puoi personalizzarlo per adattarlo 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 usare:** Scegli tra le icone disponibili nel Lightning Design System.
* **Opzionale:** Puoi lasciarlo vuoto se non vuoi 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 al look & feel del tuo sito.
* **Opzioni:**
  * Neutro
  * Brand
  * Distruttivo (per azioni come eliminare)
  * Successo (per azioni positive)
  * Altro...

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

Regolare le impostazioni di aspetto ti permette di personalizzare ulteriormente l'aspetto del pulsante. Ad esempio, puoi scegliere la variante "Container" per cambiare il colore di sfondo del pulsante a tuo piacimento o 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>

### **Trigger del menu**

* **Cosa fa:** Controlla come si apre il menu.
* **Opzioni:**
  * Click
  * Hover (apre al passaggio del mouse)
  * Focus (apre al focus da tastiera)

<figure><img src="/files/5fbd30b16de188921ec112f94b79588fe05d6a63" alt=""><figcaption><p>Trigger del menu impostato su Hover</p></figcaption></figure>

### **Tooltip**

* **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 solitamente mostrata sui pulsanti del menu.
* **Opzionale:** Seleziona questa casella se preferisci un aspetto più pulito.

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

### **Allunga a tutta larghezza**

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

### **Disabilita pulsante**

* **Cosa fa:** Rende temporaneamente il pulsante e il menu non utilizzabili.
* **Opzionale:** Seleziona questa casella per impedire agli utenti di interagirvi.

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

### **Nubbin del menu**

* Il nubbin del menu è un piccolo e sottile triangolo 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 particolare pulsante, migliorando l'esperienza utente complessiva.

<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 usare:** 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 ogni elemento del menu dove andare quando qualcuno ci clicca. Questo si fa nella sezione "Collega a". Puoi saperne di più sui [diversi tipi di azioni](/experience-cloud/experience-cloud-it/tutorial/interazioni.md) che puoi attivare dal menu a pulsante qui.

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

***

## **Impostazioni di aspetto**

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

### **Spaziatura**

* **Cosa fa:** Controlla lo spazio attorno al pulsante.
* **Come usare:** Usa cursori o input numerici per regolare i valori di spaziatura superiori, inferiori, sinistri e corretti.

### **Etichetta e icona**

* **Colore:** Scegli il colore predefinito per quando il pulsante è attivo (cliccato o al passaggio del mouse), e un colore per l'hover.
* **Famiglia di font:** Seleziona il font per il testo dell'etichetta (es. Arial, Times New Roman, Verdana).
* **Dimensione del font:** Regola la dimensione del testo dell'etichetta usando un cursore o un input numerico.
* **Stile del font:** Scegli testo normale, corsivo o obliquo.
* **Peso del font:** Rendi il testo leggero, normale, medio, grassetto o extra grassetto.
* **Allineamento orizzontale:** Decidi se l'icona dovrebbe essere 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 di hover quando è inattivo.

### **Bordo**

Scegli il colore predefinito per quando il pulsante è attivo e il colore di hover per il bordo attorno al pulsante.

* **Dimensione:** Regola lo spessore del bordo usando un cursore o un input numerico.
* **Stile:** Scegli tra un bordo solido, 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 elementi del menu)**

* **Bordo colore:** Scegli il colore del bordo intorno alle immagini degli elementi del menu (se presente).
* **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 dell'oggetto:** Decidi come l'immagine dovrebbe adattarsi al suo contenitore (es. fill, contain, cover).

## **Considerazioni importanti**

* **Stile:** Personalizza l'aspetto del menu a pulsante per abbinarlo al branding del tuo sito.
* **Collega a:** Considera l'aggiunta dell'interazione "Collega a" per gestire le interazioni degli utenti con gli elementi del menu.


---

# Agent Instructions: 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-it/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.