> ## 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 sieben Headertypen wählen. Der Headertyp beeinflusst Position des Logos, der Suchleiste, der Navicons und der Welten-Navigation. Du hast die Auswahl zwischen:

**Typ 1 (Classic)**

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/2P6cOh4Q-7H2VNYL/images/niu-plus-header-typ1-classic.png?fit=max&auto=format&n=2P6cOh4Q-7H2VNYL&q=85&s=32fabc27ddee63b98227a0af9e897d2b" alt="Typ 1 (Classic)" width="1910" height="270" data-path="images/niu-plus-header-typ1-classic.png" />
  </Frame>
</div>

**Typ 2 (Modern)**

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/2P6cOh4Q-7H2VNYL/images/niu-plus-header-typ2-modern.png?fit=max&auto=format&n=2P6cOh4Q-7H2VNYL&q=85&s=c3087100303e58dc2863952c27870d47" alt="Typ 2 (Modern)" width="1926" height="312" data-path="images/niu-plus-header-typ2-modern.png" />
  </Frame>
</div>

**Typ 3 (Logo mittig)**

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/2P6cOh4Q-7H2VNYL/images/niu-plus-header-typ3-logo-mittig.png?fit=max&auto=format&n=2P6cOh4Q-7H2VNYL&q=85&s=b27a87046be1ebd1d973e81e44e34ee0" alt="Typ 3 (Logo mittig)" width="1924" height="312" data-path="images/niu-plus-header-typ3-logo-mittig.png" />
  </Frame>
</div>

**Typ 4 (Kompakt)**

Einzeilige Navigation mit Menü-Scroller: Logo, Welten-Navigation und Icons teilen sich eine gemeinsame Zeile, die Navigation läuft bei Bedarf über Pfeile weiter.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/2P6cOh4Q-7H2VNYL/images/niu-plus-header-typ4-kompakt.png?fit=max&auto=format&n=2P6cOh4Q-7H2VNYL&q=85&s=2e7741da0d4437d18da470181bec8716" alt="Typ 4 (Kompakt)" width="1924" height="206" data-path="images/niu-plus-header-typ4-kompakt.png" />
  </Frame>
</div>

<Note>
  Die Header-Typen 1 bis 4 teilen sich denselben Menüzeilen-Scroller.
</Note>

**Typ 5 (Welten) \[Beta]**

Logo mittig, Welten-Navigation links, Icons rechts, Suchfeld in einer eigenen Zeile darunter.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/2P6cOh4Q-7H2VNYL/images/niu-plus-header-typ5-welten.png?fit=max&auto=format&n=2P6cOh4Q-7H2VNYL&q=85&s=f0206e6087fa431b92eb9076faa8a68f" alt="Typ 5 (Welten) Beta" width="1920" height="274" data-path="images/niu-plus-header-typ5-welten.png" />
  </Frame>
</div>

**Typ 6 (Welten, dreizeilig) \[Beta]**

Suchfeld, Logo und Icons in der ersten Zeile, die Welten-Navigation läuft als eigene, dritte Zeile darunter.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/2P6cOh4Q-7H2VNYL/images/niu-plus-header-typ6-welten-dreizeilig.png?fit=max&auto=format&n=2P6cOh4Q-7H2VNYL&q=85&s=5d78f1cabbea732657b9eccecf8cf12b" alt="Typ 6 (Welten, dreizeilig) Beta" width="1920" height="318" data-path="images/niu-plus-header-typ6-welten-dreizeilig.png" />
  </Frame>
</div>

**Typ 7 (Welten, Topbar-Logo) \[Beta]**

Das Logo wandert in die Topbar, darunter teilen sich Welten-Navigation, Suchfeld und Icons eine gemeinsame Zeile.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/2P6cOh4Q-7H2VNYL/images/niu-plus-header-typ7-welten-topbar-logo.png?fit=max&auto=format&n=2P6cOh4Q-7H2VNYL&q=85&s=d2846adf1ae5eb72c5d71af9f8cda99a" alt="Typ 7 (Welten, Topbar-Logo) Beta" width="1934" height="282" data-path="images/niu-plus-header-typ7-welten-topbar-logo.png" />
  </Frame>
</div>

<Note>
  Die Typen 5 bis 7 befinden sich in der Beta-Phase.
</Note>

<br />

<ParamField path="Nav Item Standardklassen überschreiben" type="boolean">
  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.
</ParamField>

<ParamField path="Topbar anzeigen" type="boolean">
  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.
</ParamField>

<ParamField path="Topbar mobil anzeigen" type="boolean">
  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.
</ParamField>

<ParamField path="Sticky Nav Desktop" type="boolean">
  Lege fest, ob die Navigationsleiste auf dem Desktop mitscrollen und somit immer sichtbar sein soll.
</ParamField>

<ParamField path="Sticky Nav Mobil" type="boolean">
  Lege fest, ob die Navigationsleiste auf Mobil mitscrollen und somit immer sichtbar sein soll.
</ParamField>

### 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>

<br />

<ParamField path="Hersteller anzeigen" type="boolean">
  Lege fest, ob der Hersteller angezeigt werden soll.
</ParamField>

***

## 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` |

<ParamField path="Aktiv" type="boolean">
  Lege fest, ob der jeweilige USP aktiviert werden soll.
</ParamField>

<ParamField path="Icon" type="icon">
  Wähle ein passendes Icon aus dem Dropdown-Menü für den jeweiligen USP.
</ParamField>

***

## 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>

<ParamField path="Barrierefreiheit Icon anzeigen" type="boolean">
  Funktioniert nur in Kombination mit aktiven Barrierefreiheits-Einstellungen. Mobil wird der Floating Button immer verwendet. Nur auf Desktop verfügbar.
</ParamField>

<ParamField path="Account Icon anzeigen" type="boolean">
  Lege fest, ob das Account-Icon angezeigt werden soll.
</ParamField>

<ParamField path="Text unter Account anzeigen" type="boolean">
  Lege fest, ob der Text unter dem Account-Icon angezeigt werden soll.
</ParamField>

<ParamField path="Wunschliste anzeigen" type="boolean">
  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.
</ParamField>

<ParamField path="Text unter Wunschliste anzeigen" type="boolean">
  Lege fest, ob der Text unter der Wunschliste angezeigt werden soll.
</ParamField>

<ParamField path="Vergleichsliste anzeigen" type="boolean">
  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.
</ParamField>

<ParamField path="Text unter Vergleichsliste anzeigen" type="boolean">
  Lege fest, ob der Text unter der Vergleichsliste angezeigt werden soll.
</ParamField>

<ParamField path="Text unter Warenkorb anzeigen" type="boolean">
  Lege fest, ob der Warenkorbwert unter dem Warenkorb angezeigt werden soll.
</ParamField>

### 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'}} />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.