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.

Diese Komponente nutzt Slots für erweiterte Anpassungen und ist damit ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht.

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.

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.

Wenn Ihre Datenquelle auf manuell gesetzt ist und Ihr Menü Unterelemente enthält, können Sie die 'Menüvariante'Funktion verwenden.

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

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.

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.

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.

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.

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.