> 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-navigation.md).
# AX - Navigazione
## Panoramica
**AX - Navigazione** è un componente di Experience Cloud che visualizza una barra di navigazione personalizzabile con link e menu nelle pagine dei siti Experience.
Usalo per creare strutture di navigazione personalizzate oltre la navigazione standard di Experience Cloud, come menu secondari, navigazione contestuale o gruppi di link specifici per azioni. Configura elementi del menu, stile, menu a discesa e destinazioni dei link in Experience Builder senza codice.
Perfetto per la navigazione personalizzata delle pagine, i menu contestuali, i link di azione rapida o ovunque il tuo portale abbia bisogno di una navigazione oltre l'intestazione predefinita del sito.
{% hint style="danger" %}
Questo componente [utilizza gli slot](/experience-cloud/experience-cloud-it/per-iniziare/learning-the-basics.md#understanding-slots) per una personalizzazione avanzata, rendendolo ideale per i siti LWR. I siti Aura non supportano questo livello di personalizzazione.
{% endhint %}
{% hint style="info" %}
Il componente Avonni Navigation è progettato pensando a una maggiore flessibilità. A differenza della navigazione standard di Salesforce, consente strutture di menu più complesse. Puoi creare menu multilivello: considerali come livelli o passaggi. Per esempio, puoi avere elementi principali (Livello 1), sotto-elementi sotto questi (Livello 2) e persino sotto-sotto-elementi (Livello 3). Questo approccio a livelli rende più facile organizzare e presentare una grande quantità di informazioni in modo strutturato e accessibile.
Inoltre, Avonni offre una gamma più ampia di opzioni di stile. Questo ti permette di personalizzare da vicino l'aspetto del menu di navigazione in base allo stile del tuo brand. Hai molto più che semplici opzioni per colore primario e font. Avonni consente una personalizzazione più profonda, permettendoti di creare un'esperienza di navigazione visivamente gradevole e che sembra un'estensione naturale del tuo brand.
{% endhint %}
## Proprietà
{% tabs %}
{% tab title="🎚️ Configurazione generale" %}
| Nome | Descrizione |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Orientamento`** | Scegli tra 'orizzontale' per una barra di navigazione superiore tradizionale o 'verticale' per una navigazione in stile barra laterale. |
| **`Mostra logo del sito`** | Attiva per visualizzare il logo del sito all'interno del componente di navigazione. |
| **`Fisso in alto`** | Abilita per mantenere la barra di navigazione nella parte superiore della finestra di visualizzazione mentre gli utenti scorrono la pagina. |
| **`Abilita menu mobile`** | Attiva un menu ottimizzato per dispositivi mobili per una navigazione migliore sugli schermi più piccoli. |
| **`Apri menu al passaggio del mouse`** | Configura i menu a discesa per aprirsi quando l'utente passa il mouse sopra un elemento del menu, invece di richiedere un clic. |
| **`Ombreggiato`** | Aggiungi un sottile effetto ombra alla barra di navigazione per dare profondità visiva. |
| **`Mostra indicatore del menu a discesa`** | Mostra una piccola grafica a forma di freccia che punta all'elemento del menu quando il relativo menu a discesa è aperto. |
| **`Mostra indicatore dell'elemento`** | Attiva per visualizzare indicatori visivi che segnalano la disponibilità di altro contenuto sotto un elemento del menu. |
| {% endtab %} | |
{% tab title="🗄️ Configurazione dell'origine dati" %}
**Origine dati manuale:** Usa questa opzione per creare la tua struttura di navigazione, definendo ogni elemento e le sue proprietà.
| Nome | Descrizione |
| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **`Etichetta`** | Scegli tra 'orizzontale' per una barra di navigazione superiore tradizionale o 'verticale' per una navigazione in stile barra laterale. |
| **`Descrizione`** | Attiva per visualizzare il logo del sito all'interno del componente di navigazione. |
| **`Tag`** | Abilita per mantenere la barra di navigazione nella parte superiore della finestra di visualizzazione mentre gli utenti scorrono la pagina. |
| **`Suggerimento`** | Attiva un menu ottimizzato per dispositivi mobili per una navigazione migliore sugli schermi più piccoli. |
| **`Variante avatar`** | Configura i menu a discesa per aprirsi quando l'utente passa il mouse sopra un elemento del menu, invece di richiedere un clic. |
| **`Nome icona avatar`** | Aggiungi un sottile effetto ombra alla barra di navigazione per dare profondità visiva. |
| **`Dimensione icona avatar`** | Mostra una piccola grafica a forma di freccia che punta all'elemento del menu quando il relativo menu a discesa è aperto. |
| **`Origine immagine avatar`** | Attiva per visualizzare indicatori visivi che segnalano la disponibilità di altro contenuto sotto un elemento del menu. |
| **`Etichetta dei sotto-elementi e dei sotto-sotto-elementi`** | Il testo visualizzato per il sotto-elemento. |
| **`Link dei sotto-elementi e dei sotto-sotto-elementi a`** |
L'URL o la pagina del sito a cui punta il sotto-elemento.
Questo può essere ulteriormente annidato in "sotto-sotto-elementi" con le stesse impostazioni per un altro livello di profondità
|
| {% endtab %} | |
{% tab title="🎨 Stile" %}
### Impostazioni generali di navigazione
| Nome | Descrizione |
| ------------------------------------------- | ------------------------------------------------------------------------------------- |
| **`Dimensione`** | Personalizza le dimensioni complessive del menu di navigazione. |
| **`Colore di sfondo`** | Imposta il colore di sfondo in modo che corrisponda al tema del tuo sito. |
| **`Larghezza massima del logo del sito`** | Definisci la larghezza massima del logo del sito per un branding coerente. |
| **`Dimensione/colore del bordo inferiore`** | Personalizza la dimensione e il colore del bordo inferiore per un aspetto distintivo. |
### Impostazioni dell'elemento di navigazione
| Nome | Descrizione |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Larghezza elemento, larghezza min/max`** | Specifica le dimensioni di larghezza per ogni elemento di navigazione. |
| **`Colore di sfondo dell'elemento`** | Imposta colori di sfondo diversi per gli stati attivo e al passaggio del mouse. |
| **`Etichetta dell'elemento`** | Ampie opzioni di personalizzazione per il testo dell'etichetta, inclusi colore, dimensione del font, famiglia, peso e ombra, con impostazioni separate per gli stati attivo e al passaggio del mouse. |
| **`Descrizione dell'elemento`** | Personalizza il colore del testo, la dimensione del font, la famiglia, il peso e l'ombra per le descrizioni degli elementi. |
| **`Bordo elemento`** | Regola la dimensione e il colore del bordo con impostazioni aggiuntive per lo stato attivo. |
### Stile dei sotto-elementi e del menu
| Nome | Descrizione |
| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Colore di sfondo del sotto-elemento (selezionato)`** | Scegli un colore di sfondo per i sotto-elementi selezionati. |
| **`Spaziatura dei sotto-elementi (blocco/in linea)`** | Regola la spaziatura attorno ai sotto-elementi. |
| **`Etichetta del sotto-elemento`** | Opzioni per personalizzare il colore del testo, la dimensione del font, la famiglia, il peso e l'ombra, incluse le impostazioni dello stato al passaggio del mouse. |
| **`Dimensioni del menu`** | Imposta la dimensione del menu, con impostazioni di larghezza/altezza minima e massima. |
| **`Larghezza della colonna del menu`** | Definisci la larghezza delle colonne nel menu. |
| **`Spaziatura del menu (blocco/in linea)`** | Regola la spaziatura all'interno del menu. |
| **`Bordo del menu`** | Personalizza colore, dimensione, stile e raggio del bordo del menu. |
| **`Icona del menu`** | Imposta i colori per gli stati normale, attivo e al passaggio del mouse. |
| **`Etichetta del gruppo/colonna del menu`** | Ampie opzioni di personalizzazione del testo per le etichette di gruppo e colonna. |
### Stile del menu a scomparsa
| Nome | Descrizione |
| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **`Colore di sfondo del menu a scomparsa`** | Impostazioni diverse per i colori di sfondo dell'elemento aperto e dello sfondo secondario. |
| **`Titolo principale/secondario del menu a scomparsa`** | Personalizza il colore del testo, la dimensione del font, la famiglia, il peso e l'ombra per i titoli principali e secondari. |
| **`Descrizione secondaria del menu a scomparsa`** | Opzioni per colore del testo, dimensione del font, famiglia, peso e ombra. |
### Stile del menu a scomparsa mobile
| Nome | Descrizione |
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **`Titolo principale/secondario del menu a scomparsa mobile`** | Opzioni di personalizzazione simili al menu a scomparsa desktop, adattate alla visualizzazione mobile. |
| **`Descrizione secondaria del menu a scomparsa mobile`** | Regola il colore del testo, la dimensione del font, la famiglia, il peso e l'ombra per le descrizioni nel menu a scomparsa mobile. |
| {% endtab %} | |
| {% endtabs %} | |
## Aspetto del menu
La **`variante del menu`** nel componente Avonni Navigation per Salesforce Experience Cloud determina lo stile e il comportamento complessivi del menu.
{% hint style="info" %}
Se la tua origine dati è impostata su manuale e il tuo menu include sotto-elementi, puoi usare la funzione '**`variante del menu`**' funzionalità.
{% endhint %}
Ecco i significati tipici delle varianti del menu:
### Base
La **`base`** rappresenta lo stile standard di un menu di navigazione. È semplice, con gli elementi del menu elencati di solito in riga per un orientamento orizzontale o in colonna per uno verticale. Questa variante è pulita e minimalista, quindi è una buona scelta per la maggior parte dei siti in cui si desidera un aspetto classico.
### Menu a scomparsa
La **`menu a scomparsa`** La variante implica un menu che scorre da un lato, simile a un cassetto aperto. Questo stile è spesso usato per i menu verticali, soprattutto nelle visualizzazioni mobili o quando lo spazio sullo schermo è limitato. Mantiene la navigazione nascosta e accessibile tramite un'icona del menu (spesso un'icona "hamburger") finché non serve.
Esempio di variante menu a scomparsa
### Colonne
Con la **`variante colonne`** i menu a discesa vengono visualizzati in colonne, consentendo un layout strutturato multilivello all'interno del menu a discesa stesso. Questo è particolarmente utile per organizzare una navigazione complessa con molti elementi o categorie, rendendo più facile per gli utenti consultare le opzioni.
Esempio di variante Colonne
### Schede
La **`schede`** converte gli elementi di menu di livello superiore in una navigazione a schede. Questo stile è spesso usato quando diverse sezioni di un sito devono essere delimitate e accessibili direttamente dalla barra di navigazione. Offre un'interfaccia familiare per gli utenti, simile alle schede di un raccoglitore o di un browser web.
Ciascuna di queste varianti può aiutare a definire l'esperienza di navigazione del tuo sito, quindi è importante sceglierne una che sia in linea con i principi di design del tuo sito e migliori il percorso dell'utente.
Esempio di variante Schede
---
# 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-navigation.md?ask=&goal=
```
`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.