# Navigation

### Übersicht

Die Navigation ist das Hauptnavigationselement in deinem Shop. Den Inhalt bzw. die einzelnen Links pflegst du über das [Kategorie Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge) von Shopware. Anschließend definierst du den Einstiegspunkt der Hauptnavigation in den Grundeinstellungen deines [Verkaufskanals](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele#grundeinstellungen).

### Grundeinstellungen

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2Ff3PT9oYknmLWUr5fBEkY%2Fheader-navigation-grundeinstellungen.webp?alt=media&#x26;token=b88614dd-e121-4b83-a5b7-1cd4a099cba9" alt=""><figcaption></figcaption></figure>

<details>

<summary>Position</summary>

**Innerhalb des Headers (Voraussetzung: Header Style "Variante 1")**\
Mit dieser Einstellung lässt sich die Navigation innerhalb deines [Headers](https://docs.atloss.de/theme-konfiguration/header/header) darstellen. Vergewissere dich jedoch, dass du den [Header Style](https://docs.atloss.de/theme-konfiguration/header#style) "Variante 1" ausgewählt hast. Andernfalls wird die Navigation automatisch unterhalb deines Headers eingebunden. Je schmaler der Bildschirm eines Endgeräts wird, desto weniger Platz entsteht innerhalb des Headers für die Navigation. Bevor die Navigation abgeschnitten wird, springt sie bei kritischer Bildschirmbreite automatisch unter den Headers.

**Unterhalb des Headers** \
Die Navigation wird unterhalb deines [Headers](https://docs.atloss.de/theme-konfiguration/header/header) mittels einer neuen Zeile integriert.

</details>

<details>

<summary>Ausrichtung</summary>

**Linksbündig**\
Die einzelnen Links innerhalb deiner Navigation werden linksbündig ausgerichtet.

**Zentriert** \
Die einzelnen Links innerhalb deiner Navigation werden zentriert.

</details>

<details>

<summary>Home Link</summary>

Der sog. "Home Link" ist ein Navigations-Element, der einen Besucher per Klick automatisch auf die Startseite führt. Gerade bei Shops mit wenigen Kategorien, kann dieser häufig Sinn machen, um die Navigation mit einem weiteren sinnigen Link aufzufüllen.

***

**Anzeigen**\
Der Home Link wird integriert.

**Ausblenden** \
Der Home Link wird deaktiviert.

</details>

<details>

<summary>Hover Effekt Style</summary>

Hier kannst du dich zwischen unterschiedlichen [Hover Effekten](https://docs.atloss.de/academy/fachbegriffe/hover-effekt) für deine Links innerhalb der Navigation entscheiden.

***

Effekt 1:

<img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FgCJlrTsrt0qOwbUCRguo%2Fnavigation-hover-effekt-katana.gif?alt=media&#x26;token=bceaab4a-3c34-4858-ae21-7e932d09f711" alt="" data-size="original">

Effekt 2:

<img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FteursRHIT5Uv5w6JbKFk%2Fnavigation-hover-effekt-bonsai.gif?alt=media&#x26;token=5d23756f-f0e0-48d5-8e2f-a7852029898f" alt="" data-size="original">

</details>

<details>

<summary>Hervorhebungen</summary>

Wähle eine oder mehrere Hauptkategorien, die du farblich hervorheben möchtest. Die Farbe kannst du in den Abschnitten weiter unten je nach Position deiner Navigation konfigurieren.

</details>

### Abstände

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FBAm9XxBH1pIs4USCRHAK%2Fheader-navigation-abstaende.webp?alt=media&#x26;token=536ee8b5-4060-4e7a-869e-4e5acad26e24" alt=""><figcaption></figcaption></figure>

<details>

<summary>Höhe (in px)</summary>

Definiert die Höhe der Navigationsleiste. Je größer der Wert, desto höher die Navigation. Je kleiner der Wert, desto schmaler.

</details>

<details>

<summary>Abstand zwischen den Links (in px)</summary>

Mit dieser Einstellung kannst du den Zwischenabstand deiner Links innerhalb der Navigation anpassen.

</details>

<details>

<summary>Hover Effekt Versatz (in px) - Innerhalb des Headers</summary>

Hiermit kannst du den Versatz des zuvor konfigurierten [Hover Effekts](#hover-effekt-style) für die [Navigation innerhalb des Headers](#position) festlegen. Je höher der Wert, desto näher rückt der Effekt an die Schrift.

***

Beachte, dass die Navigation innerhalb des Headers für kleinere Bildschirme automatisch auf eine Darstellung unterhalb des Headers umbricht, sofern es an Platz innerhalb des Headers mangelt. Stelle daher sicher, dass du den Hover Effekt Versatz ebenfalls für die Navigation unterhalb des Headers konfigurierst.

</details>

<details>

<summary>Hover Effekt Versatz (in px) - Unterhalb des Headers</summary>

Hiermit kannst du den Versatz des zuvor konfigurierten [Hover Effekts](#hover-effekt-style) für die [Navigation unterhalb des Headers](#position) festlegen. Je höher der Wert, desto näher rückt der Effekt an die Schrift.

</details>

### Typografie

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FjmJmHoklDaTZ3NLh4YAY%2Fheader-navigation-typografie.webp?alt=media&#x26;token=a754b23b-569c-475a-abbe-8851a87fca05" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftgröße (in px)</summary>

Lege die Schriftgröße der Links innerhalb der Navigation fest.

</details>

<details>

<summary>Schriftstärke</summary>

Definiere die Schriftstärke der Links innerhalb der Navigation. Je nach [Schriftart](https://docs.atloss.de/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Großbuchstaben</summary>

**Ja**\
Schreibt deine Links innerhalb der Navigation automatisch in Großbuchstaben. Somit musst du deine [Kategorien](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge) nicht in Großbuchstaben verfassen.

**Nein** \
Verwendet die Normalschreibweise, wie die [Kategorien](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge) angelegt wurden.

</details>

<details>

<summary>Zeichenabstand (in px)</summary>

Passe den Zeichenabstand deiner Links innerhalb der Navigation an. Je größer der Wert, desto mehr Platz entsteht zwischen den einzelnen Zeichen.

</details>

### Farben für die Navigation innerhalb des Headers

{% hint style="info" %}
Sofern du dich für die [Position](#position) deiner Navigation innerhalb des Headers entschieden hast, steht dir an dieser Stelle eine gesonderte Farbkonfiguration für deine Navigation zur Verfügung. Solltest du deine Navigation unterhalb des Headers konfiguriert haben, hat diese Farbkonfiguration keinen Einfluss mehr.
{% endhint %}

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2Fe4SHRaV97PajjX9TB2U4%2Fheader-navigation-farben-fuer-die-navigation-innerhalb-des-headers.webp?alt=media&#x26;token=5811d9bf-68f6-4c50-bfff-90f0ac2c769a" alt=""><figcaption></figcaption></figure>

<details>

<summary>Link</summary>

Lege die Farbe deiner Links innerhalb der Navigation fest. Hierbei wird automatisch die [Variable](https://docs.atloss.de/academy/fachbegriffe/variable) für die [Link Farbe](https://docs.atloss.de/allgemein/typografie#link-farbe) verwendet.&#x20;

</details>

<details>

<summary>Aktiver Link</summary>

Lege die Farbe für den aktiven Link innerhalb deiner Navigation fest. Ein Link ist aktiv, sobald die Kategorie selbst bzw. eine Unterkategorie oder ein Produkt innerhalb der Kategorie geöffnet wurde. Hierbei wird automatisch die [Variable](https://docs.atloss.de/academy/fachbegriffe/variable) für die [Link Farbe](https://docs.atloss.de/allgemein/typografie#link-farbe) verwendet.

</details>

<details>

<summary>Hover Effekt</summary>

Lege die Farbe für den oben konfigurierten [Hover Effekt Style](#hover-effekt-style) fest. Standardmäßig wird hierbei deine [Primärfarbe](https://docs.atloss.de/allgemein/theme-farben#primaerfarbe) über eine [Variable](https://docs.atloss.de/academy/fachbegriffe/variable) verwendet.

</details>

<details>

<summary>Hervorhebung</summary>

Farbe für hervorgehobene [Hauptkategorien](#hervorhebungen).

</details>

### Farben für die Navigation unterhalb des Headers

{% hint style="info" %}
Mit dieser Konfiguration kannst du die Farben deiner Navigation unterhalb des Headers anpassen. Diese ist ebenfalls für die Konfiguration der [Position](#position) innerhalb des Headers relevant. Gerade bei schmaleren Bildschirmen bricht die Navigation automatisch um und wird unterhalb des Headers dargestellt.
{% endhint %}

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FvDfDpx1tcAeL7fdJ2kPW%2Fheader-navigation-farben-fuer-die-navigation-unterhalb-des-headers.webp?alt=media&#x26;token=f89c543d-1fc5-46fc-a966-b02411786606" alt=""><figcaption></figcaption></figure>

<details>

<summary>Hintergrund</summary>

Definiere eine Hintergrundfarbe für die gesamte Navigationsleiste.

</details>

<details>

<summary>Rahmenfarbe</summary>

Hinterlege eine Farbe für den Rahmen unterhalb der Navigationsleiste. Der Rahmen dient hierbei als visuelle Abtrennung des Headers zum Seiteninhalt, sobald man auf einer Seite scrollt. Standardmäßig wird an dieser Stelle deine [Rahmenfarbe](https://docs.atloss.de/allgemein/theme-farben#rahmen) über eine [Variable](https://docs.atloss.de/academy/fachbegriffe/variable) eingebunden.

</details>

<details>

<summary>Link</summary>

Lege die Farbe deiner Links innerhalb der Navigation fest. Hierbei wird automatisch die [Variable](https://docs.atloss.de/academy/fachbegriffe/variable) für die [Link Farbe](https://docs.atloss.de/allgemein/typografie#link-farbe) verwendet.&#x20;

</details>

<details>

<summary>Aktiver Link</summary>

Lege die Farbe für den aktiven Link innerhalb deiner Navigation fest. Ein Link ist aktiv, sobald die Kategorie selbst bzw. eine Unterkategorie oder ein Produkt innerhalb der Kategorie geöffnet wurde. Hierbei wird automatisch die [Variable](https://docs.atloss.de/academy/fachbegriffe/variable) für die [Link Farbe](https://docs.atloss.de/allgemein/typografie#link-farbe) verwendet.

</details>

<details>

<summary>Hover Effekt</summary>

Lege die Farbe für den oben konfigurierten [Hover Effekt Style](#hover-effekt-style) fest. Standardmäßig wird hierbei deine [Primärfarbe](https://docs.atloss.de/allgemein/theme-farben#primaerfarbe) über eine [Variable](https://docs.atloss.de/academy/fachbegriffe/variable) verwendet.

</details>

<details>

<summary>Hervorhebung</summary>

Farbe für hervorgehobene [Hauptkategorien](#hervorhebungen).

</details>