> 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 Seiten von Experience Sites 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 linkbasierte Gruppen für bestimmte Aktionen. Konfigurieren Sie Menüelemente, Gestaltung, Dropdowns und Linkziele in Experience Builder ohne Code. Perfekt für benutzerdefinierte Seitennavigation, kontextbezogene Menüs, Schnellaktionslinks oder überall dort, wo Ihr Portal Navigation über die standardmäßige Site-Kopfzeile hinaus 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-Navigationskomponente ist mit Blick auf größere Flexibilität konzipiert. Anders als die standardmäßige Salesforce-Navigation ermöglicht sie komplexere Menüstrukturen. Sie können Menüs mit mehreren Ebenen erstellen – denken Sie dabei an Schichten oder Stufen. Beispielsweise können Sie Hauptelemente (Ebene 1), Unterelemente darunter (Ebene 2) und sogar Unterunterelemente (Ebene 3) haben. Dieser geschichtete Ansatz erleichtert es, eine große Menge an Informationen strukturiert und zugänglich zu organisieren und darzustellen. Darüber hinaus bietet Avonni eine breitere Palette an Stiloptionen. So 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 eine tiefere Anpassung, sodass Sie ein Navigationserlebnis schaffen können, das visuell ansprechend ist und sich wie eine natürliche Erweiterung Ihrer Marke anfühlt. {% endhint %} ## Konfiguration ### Allgemeine Konfiguration **Ausrichtung** wählt `horizontales` (eine traditionelle obere Navigationsleiste) oder `vertikales` (Navigation im Seitenleisten-Stil). **Site-Logo anzeigen** schaltet die Anzeige des Site-Logos innerhalb der Navigationskomponente um. **Oben fixiert** hält die Navigationsleiste beim Scrollen der Benutzer auf der Seite oben im Sichtbereich. **Mobiles Menü aktivieren** aktiviert ein für Mobilgeräte optimiertes Menü für eine bessere Navigation auf kleineren Bildschirmen. **Menü beim Darüberfahren öffnen** öffnet Dropdown-Menüs, wenn der Benutzer mit der Maus über einen Menüpunkt fährt, statt einen Klick zu erfordern. **Schattiert** fügt der Navigationsleiste einen dezenten Schattierungseffekt für visuelle Tiefe hinzu. **Dropdown-Spitze anzeigen** zeigt eine kleine pfeilartige Grafik an, die auf den Menüpunkt zeigt, wenn das Dropdown geöffnet ist. **Elementindikator anzeigen** zeigt visuelle Indikatoren an, die signalisieren, dass unter einem Menüpunkt weitere Inhalte verfügbar sind; **Indikatorattribute** steuern die Position dieses Indikators (`vor` oder `nach` dem Element). **API-Name** ist eine eindeutige Kennung zur Referenzierung der Komponente. **Variante des mobilen Menüs** wählt aus, wie das Menü auf kleinen Bildschirmen dargestellt wird (`Schublade` oder `Dropdown`), und **Link zu – Site-Logo** definiert eine Interaktion, die ausgelöst wird, wenn auf das Site-Logo geklickt wird. ### Datenquelle Verwenden Sie die **manuelle Datenquelle** um Ihre Navigationsstruktur zu erstellen und jedes Element sowie seine Eigenschaften zu definieren: **Bezeichnung** ist der für das Element angezeigte Text, und **Beschreibung** ist ein optionaler zusätzlicher Text, der zusammen mit ihm angezeigt wird. **Tag** fügt dem Element ein kleines Badge hinzu, und **Tooltip** legt den Text fest, der beim Darüberfahren angezeigt wird. **Avatar-Variante**, **Name des Avatar-Symbols**, **Größe des Avatar-Symbols** und **Bildquelle des Avatars** konfigurieren Sie einen optionalen Avatar für das Element — seine Form, das Fallback-Symbol, die Größe und die Bildquelle. **Beschriftung für Unterelemente und Unterunterelemente** ist der für ein Unterelement angezeigte Text, und **Link zu Unterelementen und Unterunterelementen** ist die URL oder die Site-Seite, auf die verlinkt wird. Elemente können mit denselben Einstellungen noch eine Ebene tiefer in „Unterunterelemente“ verschachtelt werden. ### Menüdarstellung Die **`Menüvariante`** die Einstellung in 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ü Unterelemente enthält, können Sie die '**`Menüvariante`**'Funktion verwenden. {% endhint %}
Hier sind die typischen Bedeutungen der Menüvarianten: #### Basis Die **`Basis`** Variante steht für den Standardstil eines Navigationsmenüs. Sie ist unkompliziert, mit Menüelementen, die in der Regel in einer Zeile bei horizontaler Ausrichtung oder in einer Spalte bei vertikaler Ausrichtung aufgeführt werden. Diese Variante ist sauber und minimalistisch und daher eine gute Wahl für die meisten Sites, bei denen ein klassisches Erscheinungsbild gewünscht ist. #### Schublade Die **`Schublade`** Die Variante steht für ein Menü, das seitlich herausgleitet, ähnlich einer geöffneten Schublade. Dieser Stil wird häufig für vertikale Menüs verwendet, insbesondere in mobilen Ansichten oder wenn der verfügbare Bildschirmplatz knapp ist. Dadurch bleibt die Navigation versteckt und über ein Menüsymbol (oft ein „Hamburger“-Symbol) bei Bedarf zugänglich.

Beispiel für die Schubladen-Variante

#### 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 Benutzern das Durchsuchen der Optionen zu erleichtern.

Beispiel für die Spalten-Variante

#### Registerkarten Die **`Registerkarten`** Variante wandelt die Menüelemente der obersten Ebene in eine Registerkarten-Navigation um. 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 Benutzern eine vertraute Oberfläche, ähnlich wie Registerkarten in einem Ordner oder in 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 Benutzerführung verbessert.

Beispiel für die Registerkarten-Variante

## Styling {% tabs %} {% tab title="Allgemeine Navigationseinstellungen" %} | Name | Beschreibung | | ------------------------------------- | ------------------------------------------------------------------------------------- | | **`Größe`** | Passen Sie die Gesamtabmessungen des Navigationsmenüs an. | | **`Hintergrundfarbe`** | Legen Sie die Hintergrundfarbe so fest, dass sie zum Design Ihrer Site passt. | | **`Maximale Breite des Site-Logos`** | Definieren Sie die maximale Breite des Site-Logos für ein einheitliches Branding. | | **`Größe/Farbe des unteren Rahmens`** | Passen Sie Größe und Farbe des unteren Rahmens für ein markantes Erscheinungsbild an. | | {% endtab %} | | {% tab title="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 den 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 Größe und Farbe des Rahmens mit zusätzlichen Einstellungen für den aktiven Zustand an. | | {% endtab %} | | {% tab title="Styling 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. | | **`Unterelement-Beschriftung`** | 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 Minimal- und Maximalwerten für Breite/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 den normalen, aktiven und Hover-Zustand fest. | | **`Beschriftung für Menügruppe/Spalte`** | Umfangreiche Textanpassungsoptionen für Gruppen- und Spaltenbeschriftungen. | | {% endtab %} | | {% tab title="Stil des Schubladenmenüs" %} | Name | Beschreibung | | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | | **`Hintergrundfarbe der Schublade`** | Unterschiedliche Einstellungen für die Hintergrundfarben des geöffneten Elements und des sekundären Elements. | | **`Haupt-/Sekundärtitel der Schublade`** | Passen Sie Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten für Haupt- und Sekundärtitel an. | | **`Sekundäre Beschreibung der Schublade`** | Optionen für Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten. | | {% endtab %} | | {% tab title="Stil der mobilen Schublade" %} | Name | Beschreibung | | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | **`Haupt-/Sekundärtitel der mobilen Schublade`** | Anpassungsoptionen ähnlich der Desktop-Schublade, zugeschnitten auf die mobile Ansicht. | | **`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 %} | | --- # 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.