Wie lege ich eine Header Komponente für die Navigation an? 

Eine Header-Komponente kann erstellt werden, um auf jeder Seite der Anwendung konsistente Inhalte auszugeben. Sie wird in der Regel verwendet, um die Navigation darzustellen und ermöglicht es dem Benutzer, unabhängig von der aktuellen Seite auf alle Seiten zuzugreifen. Durch die Verwendung einer Header-Komponente wird eine einheitliche Darstellung und Navigation auf allen Seiten gewährleistet, was die Benutzerfreundlichkeit erhöht und die Navigation für die Nutzer erleichtert, unabhängig davon, auf welcher Seite sie sich befinden.

1. Klicken Sie in der Navigationsleiste auf Application
2. Wählen Sie die Application aus, dessen Header-Komponente angepasst werden soll
3. Nachdem Sie auf die Application geklickt haben, öffnet sich die Übersichtsseite der Application
4. Klicken Sie auf Header Komponenten im Abschnitt Einstellungen auf der rechten Seite
5. Klicken Sie im Application Builder auf der rechten Seite auf die voreingestellte Area Navigation

In der Area Navgation, befinden sich die Areas "Normal" und "Opened". Für beide Areas kann bei Bedarf ein Area Style und eine Hintergrundfarbe zugewiesen werden. Welche Einstellungen Sie in den jeweiligen Areas vornehmen können erfahren Sie folgend.

Je nachdem, welche Inhalte Sie in Ihrer Header-Komponente platzieren möchten, können Sie Elemente hinzufügen. In diesem Handbucheintrag wird gezeigt, wie Sie Ihr Logo und die Navigation in Ihrer Header-Komponente einfügen können. Sie haben jedoch jederzeit die Möglichkeit, die Navigation nach Belieben zu erweitern und weitere Elemente hinzuzufügen.

Normal

Die Normal Area enthält alle Einstellungen für die Navigation, wenn diese nicht geöffnet ist. Hier können Sie das Aussehen, Verhalten und die Funktionen der Navigationselemente konfigurieren, wenn die Navigation in ihrer Standardansicht angezeigt wird. 

1. Klicken Sie auf Normal
2. Geben Sie bei Bedarf einen Area Style und/oder eine Background color an
3. Klicken Sie auf den Pfeil neben Normal und fügen Sie ein Media- und ein Navigation-Element hinzu

Media: Für Ihr Logo

1. Klicken Sie auf das hinzugefügte Media-Element
2. Klicken Sie auf das +-Symbol im Bereich Content-Mapping
3.  Wählen Sie Ihr Logo aus
4. Geben Sie dem Logo bei Bedarf einen Boxstyle, im Bereich Style mapping im Feld mediaBOX
5. Soll Ihr Logo auf die Startseite verlinken, aktivieren Sie den Slide-Toggle link und hinterlegen Sie im Feld linkPage den Slug Ihrer Startseite
6. Die Größe Ihres Logos können Sie über das Feld maxHeight anpassen

Navigation: Die angelegte (main) Navigation. Voraussetzung: Navigation anlegen

1. Wählen Sie im Bereich Content Mapping Ihre Navigation im Feld main aus
2. Wählen Sie den Navigation-Style Ihrer Navigation für das erste Level aus (firstLevelNav)
3. Wählen Sie einen Boxstyle für die Navigation im ersten Level aus (firstLevelBox)
4. Haben Sie weitere Level der Navigation können Sie für diese ebenfalls einen eigenen Navigation-Style und Boxstyle auswählen
5. Scrollen Sie zu den Settings
6. Sie können den Slide-Toggle mit der Option autoCollapse aktivieren, um die Navigation automatisch in ein Burger-Menü zu verwandeln, wenn der verfügbare Platz nicht ausreicht
7.  Wählen Sie in dem Feld direction die gewünschte Ausrichtung Ihrer Navigation aus: 
   1. row, um die Navigationspunkte nebeneinander anzuordnen
   2. column, um sie untereinander anzuordnen
8. Sie können die Option "fixResponsive" aktivieren, um immer ein Hamburger-Icon in der Navigation anzuzeigen
9. Wenn Sie möchten, dass Navigationspunkte mit Subnavigation einen Pfeil nach unten anzeigen, können Sie die Option showSubnavIcon aktivieren

Opened

Die Opened Area beinhaltet alle Einstellungen für die Navigation, wenn sie in der responsiven Ansicht geöffnet wird, beispielsweise wenn das Burger-Menü geklickt wird. Hier können Sie spezifische Anpassungen für die Darstellung und das Verhalten der Navigationselemente in der geöffneten Ansicht vornehmen.

1. Klicken Sie auf Opened
2. Geben Sie bei Bedarf einen Area Style und/oder eine Background color an
3. Klicken Sie auf den Pfeil neben Normal und fügen Sie eine Responsive Navigation und ein Toggle Control-Element hinzu

Responsive Navigation: Die selbe Navigation nur für alle Endgeräte optimiert

1. Wählen Sie im Bereich Content Mapping Ihre Navigation im Feld main aus
2. Wählen Sie den Navigation-Style Ihrer Navigation für das erste Level aus (firstLevelNav)
3. Wählen Sie einen Boxstyle für die Navigation im ersten Level aus (firstLevelBox)
4. Haben Sie weitere Level der Navigation können Sie für diese ebenfalls einen eigenen Navigation-Style und Boxstyle auswählen

Toggle Control: Mit dem Toggle Control wird sichergestellt, dass Nutzer welche die Navigation geöffnet haben diese wieder schließen können

1. Gehen Sie zum Bereich Content Mapping
   1. Klicken Sie auf das +-Symbol um ein openIcon hinzuzufügen, mit dem die responsive Navigation geöffnet werden kann und welches das default Icon (Burger Menü) ersetzt
   2. Klicken Sie auf das +-Symbol um ein closeIcon hinzuzufügen, mit dem die responsive Navigation geschlossen werden kann z. B. X
2. Gehen Sie zum Style mapping
   1. Geben Sie dem Icons einen Button-Style im Feld iconButton
   2. Vergeben Sie bei Bedarf einen Boxstyle für den Button im Feld buttonBox
3. Gehen Sie zu den Settings
   1. Aktivieren Sie defaultOpen, wenn alle Navigationspunkte standardmäßig offen oder sichtbar sein sollen, wenn die Seite geladen wird. Achtung! Dies kann dazu führen, dass die Navigation auf kleinen Bildschirmen oder bei vielen Navigationspunkten überfüllt aussieht.
   2. Aktivieren Sie staticClose, wenn alle Navigationspunkte geschlossen oder ausgeblendet sein sollen, bis der Benutzer sie öffnet. Empfehlenswert! Dies kann dazu beitragen, dass die Navigation auf kleinen Bildschirmen übersichtlicher aussieht und Benutzer nicht überfordert werden.
   3. Aktiveren Sie staticOpen, wenn alle Navigationspunkte sichtbar und geöffnet sein sollen, unabhängig von der Bildschirmgröße oder Anzahl der Navigationspunkte. Achtung! Dies kann dazu führen, dass die Navigation auf kleinen Bildschirmen schwierig zu lesen oder bedienen ist.

Inhalte des Datenobjekts im Header verwenden

Sie haben die Möglichkeit, Ihre Telefonnummer oder weitere Informationen in der Hauptnavigation anzuzeigen, indem Sie ein Fließtext-Element hinterlegen und es in der Navigation anzeigen lassen. Sie können das entsprechende Datenobjekt über die Einstellungen der Area verlinken, indem Sie auf das Zahnrad-Icon klicken. Dadurch können Sie zusätzliche Inhalte in Ihrer Navigation präsentieren, wie z.B. Kontaktinformationen oder andere relevante Informationen.

Das könnte Sie auch Interessieren