# 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 azione. Configura elementi del menu, stile, menu a discesa e destinazioni dei link in Experience Builder senza codice.
Perfetto per la navigazione personalizzata delle pagine, menu contestuali, link di azione rapida o ovunque il tuo portale necessiti di una navigazione oltre l'intestazione predefinita del sito.
{% hint style="danger" %}
Questo componente [utilizza gli slot](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/per-iniziare/imparare-le-basi#understanding-slots) per la 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: pensali come livelli o passaggi. Ad esempio, puoi avere elementi principali (Livello 1), sotto-elementi sotto di essi (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 consente di personalizzare da vicino l'aspetto del menu di navigazione in base allo stile del tuo brand. Hai molto più che semplici opzioni di colore primario e font. Avonni consente una personalizzazione più profonda, permettendoti di creare un'esperienza di navigazione visivamente attraente e che sembri un'estensione naturale del tuo brand.
{% endhint %}
## Proprietà
{% tabs %}
{% tab title="🎚️ Configurazione generale" %}
| Nome | Descrizione |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Orientamento`** | Scegli tra 'horizontal' per una barra di navigazione tradizionale in alto o 'vertical' 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 in cima alla finestra di visualizzazione mentre gli utenti scorrono la pagina verso il basso. |
| **`Abilita menu mobile`** | Attiva un menu ottimizzato per dispositivi mobili per una migliore navigazione su schermi più piccoli. |
| **`Apri il menu al passaggio del mouse`** | Configura i menu a discesa in modo che si aprano quando l'utente passa il mouse su un elemento del menu, anziché richiedere un clic. |
| **`Ombreggiato`** | Aggiungi un sottile effetto ombra alla barra di navigazione per dare profondità visiva. |
| **`Mostra il nubbin del menu a discesa`** | Mostra una piccola grafica simile a una freccia che punta all'elemento del menu quando il suo menu a discesa è aperto. |
| **`Mostra indicatore elemento`** | Attiva per visualizzare indicatori visivi che segnalano che sono disponibili ulteriori contenuti sotto un elemento del menu. |
| {% endtab %} | |
{% tab title="🗄️ Configurazione della sorgente dati" %}
**Sorgente dati manuale:** Usala per creare la struttura di navigazione, definendo ogni elemento e le sue proprietà.
| Nome | Descrizione |
| ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Etichetta`** | Scegli tra 'horizontal' per una barra di navigazione tradizionale in alto o 'vertical' 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 in cima alla finestra di visualizzazione mentre gli utenti scorrono la pagina verso il basso. |
| **`Tooltip`** | Attiva un menu ottimizzato per dispositivi mobili per una migliore navigazione su schermi più piccoli. |
| **`Variante avatar`** | Configura i menu a discesa in modo che si aprano quando l'utente passa il mouse su un elemento del menu, anziché 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 simile a una freccia che punta all'elemento del menu quando il suo menu a discesa è aperto. |
| **`Sorgente immagine avatar`** | Attiva per visualizzare indicatori visivi che segnalano che sono disponibili ulteriori contenuti sotto un elemento del menu. |
| **`Etichetta degli sotto-elementi e sotto-sotto-elementi`** | Il testo visualizzato per il sotto-elemento. |
| **`Link a degli sotto-elementi e sotto-sotto-elementi`** |
L'URL o la pagina del sito a cui si collega il sotto-elemento.
Questo può essere ulteriormente annidato in "sotto-sotto-elementi" con le stesse impostazioni per un ulteriore 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 degli elementi di navigazione
| Nome | Descrizione |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Larghezza elemento, larghezza min/max`** | Specifica le dimensioni della larghezza per ciascun elemento di navigazione. |
| **`Colore di sfondo dell'elemento`** | Imposta colori di sfondo diversi per gli stati attivo e hover. |
| **`Etichetta elemento`** | Opzioni estese di personalizzazione per il testo dell'etichetta, inclusi colore, dimensione del font, tipo di carattere, peso e ombra, con impostazioni separate per gli stati attivo e hover. |
| **`Descrizione elemento`** | Personalizza il colore del testo, la dimensione del font, il tipo di carattere, 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 del sotto-elemento (blocco/in linea)`** | Regola la spaziatura intorno ai sotto-elementi. |
| **`Etichetta sotto-elemento`** | Opzioni per personalizzare il colore del testo, la dimensione del font, il tipo di carattere, il peso e l'ombra, incluse le impostazioni dello stato hover. |
| **`Dimensioni del menu`** | Imposta la dimensione del menu, con impostazioni di larghezza/altezza minima e massima. |
| **`Larghezza 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 hover. |
| **`Etichetta gruppo/colonna del menu`** | Ampie opzioni di personalizzazione del testo per le etichette di gruppo e colonna. |
### Stile del menu a cassetto
| Nome | Descrizione |
| ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
| **`Colore di sfondo del menu a cassetto`** | Impostazioni diverse per l'elemento aperto e i colori di sfondo secondari. |
| **`Titolo principale/secondario del menu a cassetto`** | Personalizza il colore del testo, la dimensione del font, il tipo di carattere, il peso e l'ombra per i titoli principali e secondari. |
| **`Descrizione secondaria del menu a cassetto`** | Opzioni per colore del testo, dimensione del font, tipo di carattere, peso e ombra. |
### Stile del menu a cassetto mobile
| Nome | Descrizione |
| ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **`Titolo principale/secondario del menu a cassetto mobile`** | Opzioni di personalizzazione simili al menu a cassetto desktop, adattate alla visualizzazione mobile. |
| **`Descrizione secondaria del menu a cassetto mobile`** | Regola colore del testo, dimensione del font, tipo di carattere, peso e ombra per le descrizioni nel menu a cassetto mobile. |
| {% endtab %} | |
| {% endtabs %} | |
## Aspetto del menu
L' **`Variante del menu`** impostazione all'interno del componente Avonni Navigation per Salesforce Experience Cloud determina lo stile generale e il comportamento del menu.
{% hint style="info" %}
Se la tua sorgente dati è impostata su manuale e il tuo menu include sotto-elementi, puoi usare la funzionalità '**`Variante del menu`**'.
{% endhint %}
Ecco i significati tipici delle varianti del menu:
### Base
L' **`base`** La variante rappresenta lo stile standard di un menu di navigazione. È semplice, con gli elementi del menu elencati in genere in una riga per un orientamento orizzontale o in una colonna per un orientamento verticale. Questa variante è pulita e minimale, rendendola una buona scelta per la maggior parte dei siti in cui si desidera un aspetto classico.
### Cassetto
L' **`cassetto`** La variante implica un menu che scorre lateralmente, simile a un cassetto aperto. Questo stile è spesso usato per menu verticali, specialmente nelle viste mobili o quando lo spazio sullo schermo è limitato. Mantiene la navigazione nascosta ma accessibile tramite un'icona del menu (spesso un'icona "hamburger") finché non serve.
Esempio di variante cassetto
### Colonne
Con la variante **`colonne`** i menu a discesa vengono visualizzati in colonne, consentendo un layout strutturato e 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 sfogliare le opzioni.
Esempio di variante a colonne
### Schede
L' **`schede`** variante converte gli elementi del menu di primo livello in una navigazione a schede. Questo stile è spesso usato quando diverse sezioni di un sito devono essere distinte e accessibili direttamente dalla barra di navigazione. Offre un'interfaccia familiare agli utenti, simile alle schede in un raccoglitore o in un browser web.
Ognuna di queste varianti può aiutare a definire l'esperienza di navigazione del tuo sito, quindi è importante sceglierne una che si allinei ai principi di design del tuo sito e migliori il percorso dell'utente.
