> 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-de/experience-components/ax-navigation.md).
# AX - Navigation
## Übersicht
**AX - Navigation** ist eine Experience-Cloud-Komponente, die auf Experience-Sites-Seiten eine anpassbare Navigationsleiste mit Links und Menüs 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üelemente, Styling, Dropdowns und Link-Ziele im Experience Builder ohne Code.
Perfekt für benutzerdefinierte Seitennavigation, kontextbezogene Menüs, Schnellaktions-Links oder überall dort, wo Ihr Portal Navigation jenseits des standardmäßigen Site-Headers benötigt.
{% hint style="danger" %}
Diese Komponente [nutzt Slots](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#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 Navigation-Komponente ist mit Blick auf größere Flexibilität konzipiert. Im Gegensatz zur standardmäßigen Salesforce-Navigation ermöglicht sie komplexere Menüstrukturen. Sie können Menüs auf mehreren Ebenen erstellen – denken Sie dabei an Schichten oder Schritte. Zum Beispiel können Sie Hauptpunkte (Ebene 1), Unterpunkte darunter (Ebene 2) und sogar Unterunterpunkte (Ebene 3) haben. Dieser mehrschichtige Ansatz erleichtert die Organisation und Darstellung großer Informationsmengen auf strukturierte und zugängliche Weise.
Außerdem bietet Avonni eine breitere Palette an Styling-Optionen. So können Sie das Erscheinungsbild Ihres Navigationsmenüs präzise an den Stil Ihrer Marke anpassen. Sie haben mehr als nur Primärfarben- und Schriftoptionen. Avonni ermöglicht eine tiefere Anpassung, sodass Sie ein Navigationserlebnis schaffen können, das optisch 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 klassische obere Navigationsleiste oder „vertikal“ für eine Navigation im Seitenleistenstil. |
| **`Site-Logo anzeigen`** | Umschalten, um das Site-Logo innerhalb der Navigationskomponente anzuzeigen. |
| **`Oben fixiert`** | Aktivieren, um die Navigationsleiste beim Scrollen der Nutzer oben im sichtbaren Bereich zu halten. |
| **`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 beim Überfahren eines Menüelements mit der Maus geöffnet werden, statt einen Klick zu erfordern. |
| **`Abgeschattet`** | Fügen Sie der Navigationsleiste einen dezenten Schatteneffekt für mehr visuelle Tiefe hinzu. |
| **`Dropdown-Nubbin anzeigen`** | Eine kleine pfeilartige Grafik anzeigen, die auf das Menüelement zeigt, wenn das Dropdown geöffnet ist. |
| **`Elementindikator anzeigen`** | Aktivieren, um visuelle Indikatoren anzuzeigen, die signalisieren, dass unter einem Menüelement weitere Inhalte verfügbar sind. |
| {% endtab %} | |
{% tab title="🗄️ Konfiguration der Datenquelle" %}
**Manuelle Datenquelle:** Verwenden Sie dies, um Ihre Navigationsstruktur zu erstellen und jedes Element sowie dessen Eigenschaften zu definieren.
| Name | Beschreibung |
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Beschriftung`** | Wählen Sie zwischen „horizontal“ für eine klassische obere Navigationsleiste oder „vertikal“ für eine Navigation im Seitenleistenstil. |
| **`Beschreibung`** | Umschalten, um das Site-Logo innerhalb der Navigationskomponente anzuzeigen. |
| **`Schlagwort`** | Aktivieren, um die Navigationsleiste beim Scrollen der Nutzer oben im sichtbaren Bereich zu halten. |
| **`QuickInfo`** | 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 beim Überfahren eines Menüelements mit der Maus geöffnet werden, statt einen Klick zu erfordern. |
| **`Avatar-Symbolname`** | Fügen Sie der Navigationsleiste einen dezenten Schatteneffekt für mehr visuelle Tiefe hinzu. |
| **`Avatar-Symbolgröße`** | Eine kleine pfeilartige Grafik anzeigen, die auf das Menüelement zeigt, wenn das Dropdown geöffnet ist. |
| **`Avatar-Bildquelle`** | Aktivieren, um visuelle Indikatoren anzuzeigen, die signalisieren, dass unter einem Menüelement weitere Inhalte verfügbar sind. |
| **`Beschriftung für Unterelemente und Unterunterelemente`** | Der für das Unterelement angezeigte Text. |
| **`Linkziel für Unterelemente und Unterunterelemente`** |
Die URL oder die Site-Seite, auf die das Unterelement verweist.
Dies kann mit denselben Einstellungen für eine weitere Ebene noch weiter in „Unterunterelemente“ verschachtelt werden
|
| {% endtab %} | |
{% tab title="🎨 Gestaltung" %}
### Allgemeine Navigationseinstellungen
| Name | Beschreibung |
| ------------------------------------- | ------------------------------------------------------------------------------------- |
| **`Größe`** | Passen Sie die Gesamtabmessungen des Navigationsmenüs an. |
| **`Hintergrundfarbe`** | Legen Sie die Hintergrundfarbe passend zum Design Ihrer Site fest. |
| **`Maximale Breite des Site-Logos`** | Definieren Sie die maximale Breite für das Site-Logo für ein konsistentes Branding. |
| **`Größe/Farbe des unteren Rahmens`** | Passen Sie Größe und Farbe des unteren Rahmens für ein markantes Erscheinungsbild an. |
### Einstellungen für Navigationselemente
| Name | Beschreibung |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Elementbreite, min./max. Breite`** | 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 die Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und den Schatten für Elementbeschreibungen an. |
| **`Elementrahmen`** | Passen Sie Rahmenstärke und -farbe mit zusätzlichen Einstellungen für den aktiven Zustand an. |
### Stil für Unterelemente und Menüs
| Name | Beschreibung |
| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Hintergrundfarbe des Unterelements (ausgewählt)`** | Wählen Sie eine Hintergrundfarbe für ausgewählte Unterelemente. |
| **`Abstand der Unterelemente (Block/Inline)`** | Passen Sie den Abstand um Unterelemente an. |
| **`Beschriftung des Unterelements`** | 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 mit Einstellungen für Mindest- und Höchstbreite/-höhe fest. |
| **`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ürand`** | Passen Sie Farbe, Größe, Stil und Radius des Menürands an. |
| **`Menüsymbol`** | Legen Sie Farben für normale, aktive und Hover-Zustände fest. |
| **`Menügruppe-/Spaltenbeschriftung`** | Umfangreiche Textanpassungsoptionen für Gruppen- und Spaltenbeschriftungen. |
### Stil für Schubladenmenü
| Name | Beschreibung |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| **`Hintergrundfarbe der Schublade`** | Unterschiedliche Einstellungen für die geöffnete Element- und die sekundäre Hintergrundfarbe. |
| **`Titel der Haupt-/Sekundärschublade`** | Passen Sie die Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und den Schatten für Haupt- und Sekundärtitel an. |
| **`Sekundäre Beschreibung der Schublade`** | Optionen für Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten. |
### Stil für mobile Schublade
| Name | Beschreibung |
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **`Titel der Haupt-/Sekundärschublade für Mobilgeräte`** | Anpassungsoptionen ähnlich wie bei der Desktop-Schublade, für die mobile Ansicht optimiert. |
| **`Sekundäre Beschreibung der mobilen Schublade`** | Passen Sie Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten für Beschreibungen in der mobilen Schublade an. |
| {% endtab %} | |
| {% endtabs %} | |
## Erscheinungsbild des Menüs
Die **`Menüvariante`** Einstellung innerhalb der Avonni Navigation Component für Salesforce Experience Cloud bestimmt den Gesamtstil und das Verhalten des Menüs.
{% hint style="info" %}
Wenn Ihre Datenquelle auf manuell eingestellt ist und Ihr Menü Unterelemente enthält, können Sie die '**`Menüvariante`**'-Funktion verwenden.
{% endhint %}
Hier sind die typischen Bedeutungen der Menüvarianten:
### Basis
Die **`Basis`** Die Variante stellt den Standardstil für ein Navigationsmenü dar. Sie ist schlicht, wobei die Menüpunkte typischerweise in einer Zeile bei horizontaler Ausrichtung oder in einer Spalte bei vertikaler Ausrichtung angezeigt werden. Diese Variante ist klar und minimalistisch und damit eine gute Wahl für die meisten Sites, bei denen ein klassischer Look gewünscht ist.
### Schublade
Die **`Schublade`** Die Variante bezeichnet ein Menü, das von der Seite hereingleitet, ähnlich einer geöffneten Schublade. Dieser Stil wird häufig für vertikale Menüs verwendet, insbesondere in mobilen Ansichten oder wenn der Bildschirmplatz begrenzt ist. So bleibt die Navigation verborgen und ist über ein Menüsymbol (oft ein „Hamburger“-Symbol) zugänglich, bis sie benötigt wird.
Beispiel für die Schubladenvariante
### Spalten
Mit der **`Spalten`** Variante werden Dropdown-Menüs in Spalten angezeigt, wodurch innerhalb des Dropdowns selbst ein mehrstufiges, strukturiertes Layout möglich ist. Dies ist besonders nützlich, um komplexe Navigation mit vielen Elementen oder Kategorien zu organisieren und den Nutzern das Durchsuchen der Optionen zu erleichtern.
Beispiel für die Spaltenvariante
### Registerkarten
Die **`Registerkarten`** Variante verwandelt die Menüelemente der obersten Ebene in eine Navigation mit Registerkarten. Dieser Stil wird häufig verwendet, wenn verschiedene Bereiche einer Site klar voneinander abgegrenzt und direkt über die Navigationsleiste zugänglich sein sollen. Er bietet eine vertraute Oberfläche für Nutzer, ähnlich wie Registerkarten in einem Ordner oder einem Webbrowser.
Jede dieser Varianten kann dabei helfen, das Navigationserlebnis Ihrer Site zu definieren. Daher ist es wichtig, eine zu wählen, die zu den Designprinzipien Ihrer Site passt und die Nutzerführung verbessert.
Beispiel für die Registerkartenvariante
---
# 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-de/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.