> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Header

> Header und Navigationsleiste konfigurieren

Diese Optionen betreffen den Header und die Navigationsleiste von NIU Plus.

## Header und Navigation

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/alYwVIL6kn81v67s/images/niu-plus-header-navigation.jpg?fit=max&auto=format&n=alYwVIL6kn81v67s&q=85&s=b4eff85070f08108a83141140d19fb01" alt="Header und Navigation" width="2070" height="886" data-path="images/niu-plus-header-navigation.jpg" />
  </Frame>
</div>

### Headertyp

Hier kannst du einen der drei Headertypen wählen. Der Headertyp beeinflusst Position des Logos, der Suchleiste und der Navicons. Du hast die Auswahl zwischen:

**Typ 1 (Classic)**

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/ccc051b7-3863-4a44-99a6-616b974c2e09/image.png)</Frame>
</div>

**Typ 2 (Modern)**

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/b4fb1ac9-b5a7-4684-a136-e88e192f25e2/image.png)</Frame>
</div>

**Typ 3 (Logo mittig)**

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/e5a5500b-0555-42cd-9b64-ae8aa017b02a/image.png)</Frame>
</div>

### Nav Item Standardklassen überschreiben

Entfernt die Standard CSS Klasse der Nav Items, wenn über das **css\_klassen** Attribut eine eigene Klasse übergeben wurde. Je nach Art der Klasse, kann es sinnvoll sein die Standardklasse zu überschreiben, damit die Darstellung sich verbessert.

### Topbar anzeigen

Lege fest, ob die Topbar angezeigt werden soll. In der Topbar sind wichtige Elemente enthalten, wie der Sprachschalter und der Währungsschalter. Blende die Topbar nur aus, wenn du auf diese Elemente verzichten kannst und du den Platz einsparen möchtest. Denk auch daran, dass du einfach die Farbe der Topbar in den Variablen-Settings einstellen kannst.

### Topbar mobil anzeigen

Lege fest, ob die Navigationsleiste bei Mobil angezeigt werden soll. In der Topbar sind wichtige Elemente enthalten, wie der Sprachschalter und der Währungsschalter. Blende die Topbar nur aus, wenn du auf diese Elemente verzichten kannst und du den Platz einsparen möchtest. Denk auch daran, dass du einfach die Farbe der Topbar in den Variablen-Settings einstellen kannst.

### Sticky Nav Desktop

Lege fest, ob die Navigationsleiste auf dem Desktop mitscrollen und somit immer sichtbar sein soll.

### Sticky Nav Mobil

Lege fest, ob die Navigationsleiste auf Mobil mitscrollen und somit immer sichtbar sein soll.

### Suchfeld mobil unter Nav darstellen

Entscheide wie das Suchfeld mobil dargestellt werden soll. Ist diese Einstellung deaktiviert, hast du in der Navigation neben dem Burgermenü ein Suchicon. Ein Tab auf das Icon öffnet die Sidebar mit einem Suchfeld. Beachte hier auch die Einstellungen zur Ajaxsuche. Ist die Ajaxsuche aktiviert, wird in jedem Fall die Sidebar geöffnet, um deinen Besuchern schnell Artikel anzuzeigen, die auf ihre Suche passen. Vorschau:

**Deaktiviert**

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-header-suchfeld-deaktiviert.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=c589260ffe90164b652aff5210195d3e" alt="" width="846" height="192" data-path="images/niu-plus-header-suchfeld-deaktiviert.png" />
  </Frame>
</div>

**Aktiviert**

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-header-suchfeld-aktiviert.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=c7d8b80873152ba13a3ed0770da64a2d" alt="" width="784" height="253" data-path="images/niu-plus-header-suchfeld-aktiviert.png" />
  </Frame>
</div>

### Hersteller anzeigen

Lege fest, ob der Hersteller angezeigt werden soll.

***

## USPs

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/alYwVIL6kn81v67s/images/niu-plus-header-usps.jpg?fit=max&auto=format&n=alYwVIL6kn81v67s&q=85&s=5a79e92cc25ca2287ec0567107b0334f" alt="USPs" width="2074" height="626" data-path="images/niu-plus-header-usps.jpg" />
  </Frame>
</div>

Hier kannst du USPs für deinen Shop aktivieren und in der Navigation anzeigen lassen. Header Typ 1 unterstützt die USPs 1 und 2 und stellt diese direkt in der Nav mit dar mit Icon, Text und Untertitel. Die anderen Headertypen unterstützen bis zu 4 USPs mit Icon und Text, dargestellt unter der Nav als USP Line. Die Texte pflegst du über Sprachvariablen. Aktiviere die Hinweise, um die Sprachvariablen zu sehen, die du pflegen kannst. Du kannst die Sprachvariablen über Resources & Health im Tab Plugin Variablen bequem anpassen.

**Sprachvariablen:**

| USP   | Überschrift       | Text            |
| ----- | ----------------- | --------------- |
| USP 1 | `niu_usp1_header` | `niu_usp1_text` |
| USP 2 | `niu_usp2_header` | `niu_usp2_text` |
| USP 3 | `niu_usp3_header` | `niu_usp3_text` |
| USP 4 | `niu_usp4_header` | `niu_usp4_text` |

### Aktiv

Lege fest, ob der jeweilige USP aktiviert werden soll.

### Icon

Wähle ein passendes Icon aus dem Dropdown-Menü für den jeweiligen USP.

***

## Navicons

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/alYwVIL6kn81v67s/images/niu-plus-header-navicons.jpg?fit=max&auto=format&n=alYwVIL6kn81v67s&q=85&s=c16d6e08a396f1b4cb001f9d1736c78b" alt="Navicons" width="2064" height="872" data-path="images/niu-plus-header-navicons.jpg" />
  </Frame>
</div>

### Barrierefreiheit Icon anzeigen

Funktioniert nur in Kombination mit aktiven Barrierefreiheits-Einstellungen. Mobil wird der Floating Button immer verwendet. Nur auf Desktop verfügbar.

### Account Icon anzeigen

Lege fest, ob das Account-Icon angezeigt werden soll.

### Text unter Account anzeigen

Lege fest, ob der Text unter dem Account-Icon angezeigt werden soll.

### Wunschliste anzeigen

Lege fest, ob das Wunschlisten-Icon angezeigt werden soll. Damit der Wunschlisten-Icon angezeigt wird, muss die JTL-Shop-Einstellung [439](https://latest.niuplus.de/admin/config?einstellungen_suchen=1\&cSuche=439#global_wunschliste_anzeigen) aktiv sein.

### Text unter Wunschliste anzeigen

Lege fest, ob der Text unter der Wunschliste angezeigt werden soll.

### Vergleichsliste anzeigen

Lege fest, ob das Vergleichslisten-Icon angezeigt werden soll. Damit das Vergleichslisten-Icon angezeigt wird, muss die JTL-Shop-Einstellung [1780](https://latest.niuplus.de/admin/searchresults?cSuche=1780) aktiv sein.

### Text unter Vergleichsliste anzeigen

Lege fest, ob der Text unter der Vergleichsliste angezeigt werden soll.

### Text unter Warenkorb anzeigen

Lege fest, ob der Warenkorbwert unter dem Warenkorb angezeigt werden soll.

### Text unter NIU Menu Icon anzeigen

Lege fest, ob das NIU Menu Icon angezeigt werden soll. Diese Einstellung ist nur wirksam, wenn das NIU Menu aktiviert ist.

**Beispiele:**

Nur Warenkorb aktiviert:

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/3799ef4d-c0aa-4289-b559-0edf51c53584/image.png)</Frame>
</div>

Alles aktiviert:

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/6a08dd93-ff37-4dc5-9ae5-96a0d0a8fe8c/image.png)</Frame>
</div>

Nichts aktiviert:

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/605cbb55-5827-4ccc-b126-6f9d525b3820/image.png)</Frame>
</div>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />