# AX - Navigation
## Überblick
**AX - Navigation** ist eine Experience-Cloud-Komponente, die eine anpassbare Navigationsleiste mit Links und Menüs auf Experience-Sites-Seiten anzeigt.
Verwenden Sie sie, um benutzerdefinierte Navigationsstrukturen über die standardmäßige Experience-Cloud-Navigation hinaus zu erstellen – etwa sekundäre Menüs, kontextbezogene Navigation oder linkgruppen für bestimmte Aktionen. Konfigurieren Sie Menüpunkte, Styling, Dropdowns und Link-Ziele im Experience Builder ohne Code.
Ideal für benutzerdefinierte Seitennavigation, kontextbezogene Menüs, Schnellaktions-Links oder überall dort, wo Ihr Portal Navigation über den standardmäßigen Website-Header hinaus benötigt.
{% hint style="danger" %}
Diese Komponente [nutzt Slots](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/erste-schritte/die-grundlagen-lernen#understanding-slots) für erweiterte Anpassungen und ist damit ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht.
{% endhint %}
{% hint style="info" %}
Die Avonni-Navigationskomponente ist auf größere Flexibilität ausgelegt. Im Gegensatz zur standardmäßigen Salesforce-Navigation ermöglicht sie komplexere Menüstrukturen. Sie können Menüs mit mehreren Ebenen erstellen – stellen Sie sich diese als Schichten oder Stufen vor. Zum Beispiel können Sie Haupteinträge (Level 1), darunter Untereinträge (Level 2) und sogar Unteruntereinträge (Level 3) haben. Dieser gestaffelte Ansatz erleichtert es, eine große Menge an Informationen strukturiert und zugänglich zu organisieren und darzustellen.
Außerdem bietet Avonni eine breitere Palette an Styling-Optionen. Dadurch können Sie das Erscheinungsbild Ihres Navigationsmenüs eng an den Stil Ihrer Marke anpassen. Sie haben mehr als nur Primärfarben- und Schriftoptionen. Avonni ermöglicht tiefere Anpassungen und erlaubt Ihnen, ein Navigationserlebnis zu schaffen, das visuell ansprechend ist und sich wie eine natürliche Erweiterung Ihrer Marke anfühlt.
{% endhint %}
## Eigenschaften
{% tabs %}
{% tab title="🎚️ Allgemeine Konfiguration" %}
| Name | Beschreibung |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Ausrichtung`** | Wählen Sie zwischen 'horizontal' für eine traditionelle obere Navigationsleiste oder 'vertikal' für eine Navigation im Seitenleistenstil. |
| **`Site-Logo anzeigen`** | Schalten Sie um, um das Site-Logo innerhalb der Navigationskomponente anzuzeigen. |
| **`Oben fixiert`** | Aktivieren Sie dies, damit die Navigationsleiste beim Scrollen der Nutzer oben im sichtbaren Bereich bleibt. |
| **`Mobiles Menü aktivieren`** | Aktivieren Sie ein für Mobilgeräte optimiertes Menü für eine bessere Navigation auf kleineren Bildschirmen. |
| **`Menü bei Hover öffnen`** | Konfigurieren Sie Dropdown-Menüs so, dass sie sich öffnen, wenn der Benutzer den Mauszeiger über einen Menüpunkt bewegt, statt einen Klick zu erfordern. |
| **`Schattiert`** | Fügen Sie der Navigationsleiste einen dezenten Schatteneffekt für visuelle Tiefe hinzu. |
| **`Dropdown-Nubbin anzeigen`** | Zeigen Sie eine kleine pfeilähnliche Grafik an, die auf den Menüpunkt zeigt, wenn sein Dropdown geöffnet ist. |
| **`Elementindikator anzeigen`** | Aktivieren Sie dies, um visuelle Indikatoren anzuzeigen, die signalisieren, dass unter einem Menüpunkt weitere Inhalte verfügbar sind. |
| {% endtab %} | |
{% tab title="🗄️ Datenquellenkonfiguration" %}
**Manuelle Datenquelle:** Verwenden Sie dies, um Ihre Navigationsstruktur zu erstellen und jeden Eintrag sowie dessen Eigenschaften zu definieren.
| Name | Beschreibung |
| ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Beschriftung`** | Wählen Sie zwischen 'horizontal' für eine traditionelle obere Navigationsleiste oder 'vertikal' für eine Navigation im Seitenleistenstil. |
| **`Beschreibung`** | Schalten Sie um, um das Site-Logo innerhalb der Navigationskomponente anzuzeigen. |
| **`Tag`** | Aktivieren Sie dies, damit die Navigationsleiste beim Scrollen der Nutzer oben im sichtbaren Bereich bleibt. |
| **`Tooltip`** | Aktivieren Sie ein für Mobilgeräte optimiertes Menü für eine bessere Navigation auf kleineren Bildschirmen. |
| **`Avatar-Variante`** | Konfigurieren Sie Dropdown-Menüs so, dass sie sich öffnen, wenn der Benutzer den Mauszeiger über einen Menüpunkt bewegt, statt einen Klick zu erfordern. |
| **`Avatar-Icon-Name`** | Fügen Sie der Navigationsleiste einen dezenten Schatteneffekt für visuelle Tiefe hinzu. |
| **`Avatar-Icon-Größe`** | Zeigen Sie eine kleine pfeilähnliche Grafik an, die auf den Menüpunkt zeigt, wenn sein Dropdown geöffnet ist. |
| **`Avatar-Bildquelle`** | Aktivieren Sie dies, um visuelle Indikatoren anzuzeigen, die signalisieren, dass unter einem Menüpunkt weitere Inhalte verfügbar sind. |
| **`Beschriftung für Untereinträge und Unteruntereinträge`** | Der für den Untereintrag angezeigte Text. |
| **`Link-Ziel für Untereinträge und Unteruntereinträge`** |
Die URL oder Seiten im Portal, auf die der Untereintrag verlinkt.
Dies kann weiter in "Unteruntereinträge" verschachtelt werden, mit denselben Einstellungen für eine weitere Ebene
|
| {% endtab %} | |
{% tab title="🎨 Styling" %}
### Allgemeine Navigationseinstellungen
| Name | Beschreibung |
| ------------------------------------ | ------------------------------------------------------------------------------------ |
| **`Größe`** | Passen Sie die Gesamtabmessungen des Navigationsmenüs an. |
| **`Hintergrundfarbe`** | Legen Sie die Hintergrundfarbe fest, damit sie zum Design Ihrer Site passt. |
| **`Maximale Breite des Site-Logos`** | Definieren Sie die maximale Breite des Site-Logos für ein konsistentes Branding. |
| **`Größe/Farbe der unteren Border`** | Passen Sie Größe und Farbe der unteren Border für ein markantes Erscheinungsbild an. |
### Einstellungen für Navigationselemente
| Name | Beschreibung |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Elementbreite, Mindest-/Maximalbreite`** | Geben Sie die Breitenmaße für jedes Navigationselement an. |
| **`Hintergrundfarbe des Elements`** | Legen Sie unterschiedliche Hintergrundfarben für aktive und Hover-Zustände fest. |
| **`Elementbeschriftung`** | Umfangreiche Anpassungsoptionen für Beschriftungstext, einschließlich Farbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten, mit separaten Einstellungen für aktive und Hover-Zustände. |
| **`Elementbeschreibung`** | Passen Sie Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten für Elementbeschreibungen an. |
| **`Elementrahmen`** | Passen Sie Rahmenstärke und -farbe mit zusätzlichen Einstellungen für den aktiven Zustand an. |
### Styling von Untereinträgen und Menüs
| Name | Beschreibung |
| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Hintergrundfarbe des Untereintrags (ausgewählt)`** | Wählen Sie eine Hintergrundfarbe für ausgewählte Untereinträge. |
| **`Abstand der Untereinträge (Block/Inline)`** | Passen Sie den Abstand um Untereinträge an. |
| **`Beschriftung des Untereintrags`** | Optionen zum Anpassen von Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten, einschließlich Einstellungen für den Hover-Zustand. |
| **`Menüabmessungen`** | Legen Sie die Menügröße fest, mit Einstellungen für minimale und maximale Breite/Höhe. |
| **`Spaltenbreite des Menüs`** | Definieren Sie die Breite für Spalten im Menü. |
| **`Menüabstand (Block/Inline)`** | Passen Sie den Abstand innerhalb des Menüs an. |
| **`Menürahmen`** | Passen Sie Farbe, Größe, Stil und Radius des Menürahmens an. |
| **`Menü-Icon`** | Legen Sie Farben für den normalen, aktiven und Hover-Zustand fest. |
| **`Menügruppe / Spaltenbeschriftung`** | Umfangreiche Textanpassungsoptionen für Gruppen- und Spaltenbeschriftungen. |
### Styling des Drawer-Menüs
| Name | Beschreibung |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **`Hintergrundfarbe des Drawers`** | Unterschiedliche Einstellungen für die Hintergrundfarben des geöffneten Elements und der sekundären Ebene. |
| **`Haupt-/Sekundärtitel des Drawers`** | Passen Sie Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten für Haupt- und Sekundärtitel an. |
| **`Sekundäre Beschreibung des Drawers`** | Optionen für Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten. |
### Styling des mobilen Drawers
| Name | Beschreibung |
| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| **`Haupt-/Sekundärtitel des mobilen Drawers`** | Anpassungsoptionen ähnlich dem Desktop-Drawer, auf die mobile Ansicht zugeschnitten. |
| **`Sekundäre Beschreibung des mobilen Drawers`** | Passen Sie Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten für Beschreibungen im mobilen Drawer an. |
| {% endtab %} | |
| {% endtabs %} | |
## Erscheinungsbild des Menüs
Die **`Menüvariante`** Einstellung innerhalb der Avonni-Navigationskomponente für Salesforce Experience Cloud bestimmt den Gesamtstil und das Verhalten des Menüs.
{% hint style="info" %}
Wenn Ihre Datenquelle auf manuell gesetzt ist und Ihr Menü Untereinträge enthält, können Sie die Funktion '**`Menüvariante`**' verwenden.
{% endhint %}
Hier sind die typischen Bedeutungen der Menüvarianten:
### Base
Die **`base`** Die Variante stellt den Standardstil für ein Navigationsmenü dar. Sie ist schlicht, wobei Menüpunkte typischerweise in einer Reihe bei horizontaler Ausrichtung oder in einer Spalte bei vertikaler Ausrichtung aufgeführt sind. Diese Variante ist klar und minimalistisch und daher eine gute Wahl für die meisten Sites, bei denen ein klassischer Look gewünscht ist.
### Drawer
Die **`drawer`** Die Variante steht für ein Menü, das von der Seite hereinschiebt, ähnlich einer geöffneten Schublade. Dieser Stil wird oft für vertikale Menüs verwendet, insbesondere in mobilen Ansichten oder wenn der Platz auf dem Bildschirm begrenzt ist. Die Navigation bleibt versteckt und ist über ein Menüsymbol (oft ein "Hamburger"-Symbol) zugänglich, bis sie benötigt wird.
Beispiel für die Drawer-Variante
### Spalten
Mit der **`Spalten`** Variante werden Dropdown-Menüs in Spalten angezeigt, wodurch innerhalb des Dropdowns selbst ein mehrstufiges, strukturiertes Layout möglich wird. Dies ist besonders nützlich, um komplexe Navigation mit vielen Einträgen oder Kategorien zu organisieren und Nutzern das Durchsuchen der Optionen zu erleichtern.
Beispiel für die Spalten-Variante
### Tabs
Die **`tabs`** Die Variante wandelt die obersten Menüpunkte in eine Tab-Navigation um. Dieser Stil wird oft verwendet, wenn verschiedene Bereiche einer Site klar voneinander abgegrenzt und direkt über die Navigationsleiste zugänglich sein sollen. Er bietet Nutzern eine vertraute Oberfläche, ähnlich wie Registerkarten in einem Ordner oder einem Webbrowser.
Jede dieser Varianten kann dazu beitragen, das Navigationserlebnis Ihrer Site zu definieren. Daher ist es wichtig, eine Variante zu wählen, die zu den Designprinzipien Ihrer Site passt und die User Journey verbessert.
