> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/styling/header/main-navigation.md).

# Main Navigation

![](/files/vxmA8sKspHeptkSezjlb)

### Grundeinstellungen

Aktiviere oder deaktiviere den **Home-Link** in den Einstellungen Deines Katalogs. Ein Tutorial zum Einstellen des Home-Links findest du [hier](/faq/allgemein/home-link.md).

Der **Home-Link Aktiv-Status (1)** kann aus optischen Gründen auch deaktiviert und optional durch ein **Home-Icon (2)** abgebildet werden.

Beispiel:

<figure><img src="/files/zCUiKHk6pY41ANJgUHd0" alt=""><figcaption><p>Home-Link Aktiv-Status</p></figcaption></figure>

<figure><img src="/files/ehYYP4jacOPIE3zev0o7" alt=""><figcaption><p>Home Icon</p></figcaption></figure>

Über die **Ausrichtung (3)** kannst Du die Menüpunkte horizontal ausrichten und verteilen. Die **Trenner (4)** Einstellung unterteilt die einzelnen Menü-Elemente mit einem Trennzeichen.

Wähle aus 13+ **Hover Animation (5)** die passende Animation für Deinen Shop aus.

![](/files/jZenfzCHkhZx61OU6iRO)

Der **Scroller (6)** sorgt optional dafür, dass Kategorien der Main Navigation nicht umbrechen können - egal wie viele Hauptkategorien Du abbilden möchtest. Auf mobilen Geräte mit Toucheingabe kann horizontal gescrollt werden, auf Desktop-Geräten können mit Hilfe der **Pfeile (**<mark style="color:red;">**1**</mark>**,&#x20;**<mark style="color:red;">**2**</mark>**)** die weiteren Kategorien erreicht werden.

Beispiel:

![Menu-Scroller - Pfeil](/files/r6uSaTMAd8IbidUu7jgv)

![Menu-Scroller - Pfeil zum Zurückscrollen](/files/rVdP4uSVbSEKRqwaW32W)

Die Option **Unternavigation Aussehen (7)** bietet die Möglichkeit das Flyout-Menü durch ein einfaches Dropdown-Menü auszutauschen.

{% hint style="success" %}
Die Einstellung „**Unternavigation Aussehen**“ zum Festlegen eines Dropdown- oder Flyout-Menüs findest Du zusätzlich in den Zusatzfeldern jeder Kategorie. So kann pro Kategorie zwischen beiden Menüarten unterschieden und die Hauptnavigation flexibel kombiniert werden. [Weiterlesen](/content/kategorie/unternavigation.md)
{% endhint %}

Beispiel:

![Dropdown-Menü](/files/JeipRGICWXG67ZvT3EXP)

Mit der Option **Service-Navigation anzeigen mobile (8)** kann die Service-Navigation in de mobile Offcanvas-Menü angezeigt werden.

Beispiel:

<figure><img src="/files/tpRfAtMrj36mftFyfvXb" alt="" width="563"><figcaption></figcaption></figure>

### Rahmen oben

Wahlweise kann die Main-Navigation vom oberen Header-Bereich durch eine Trennlinie (Border) abgehoben werden.

![](/files/gDTUDQ77nohK2xBtRzHc)

Mit Hilfe der Einstellung **Volle Breite (1)** kannst Du die Linie auf die volle Header-Breite strecken. Damit läuft die Linie je nach gewähltem Grundlayout bis an den Browserrand und wird nicht durch die maximale Inhaltsbreite beschränkt.

Beispiel:

![](/files/LVXnP7pU0UdrQyU0Jjd5)

### Menü Elemente

Über die Option **Pfeile (1)** kannst Du kleine Pfeile neben den Kategorien darstellen, die angezeigt werden, wenn eine Kategorie Unterkategorien besitzt, siehe Beispiel 1.

**Icon bei externen Links (2)** <mark style="color:purple;">(ab Theme Version 2.4.3)</mark> zeigt das bekannte "Externer Link" Icon bei Kategorien des Typs "Link" an, wenn dieser durch den Haken ["In neuem Tab öffnen"](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge#allgemein) als externer Link eingestellt wurde. Damit wissen Deine Besucher ganz genau, was passiert, wenn sie auf einen solches Link klicken, siehe Beispiel 2.

Den Abstand zwischen den einzelnen Kategorien setzt Du mit **Abstand links/rechts (3)**. Solltest Du sehr viele Kategorien verwenden, reduzieren den Abstand zwischen den Kategorien.

![](/files/p4RdPlpzZtc2Tbf9Yoci)

Beispiel 1:

![Pfeile bei Kategorien mit Unterkategorien](/files/jdwCjEdcCHUIVJIOGbDV)

Beispiel 2:

![Externer Link mit "Externer Link"-Icon](/files/gBmc30okT2EZDLUy3qxl)

### Kategorie Icons

> ab Theme Version 4.7.0

Über die **Zusatzfelder** unter Kataloge > Kategorien > \[Kategorie auswählen] im Tab "Weitere" findest Du ein Medienfeld **Kategorie Icon** zum Hinterlegen des Kategorie Icons.

<figure><img src="/files/2BG2AcrTgsXzRVZW7Mp5" alt=""><figcaption></figcaption></figure>

Über die **Checkbox Icon (1)** aktivierst Du die Darstellung der Icons im Hauptmenü und stellst die **Größe (2)** der Icons für das jeweilige Menü ein. In der mobilen Darstellung wird das Hauptmenü als mobiles Offcanvas-Menü angezeigt. Auch hier kannst Du über eine Checkbox Icon mobile (2) bestimmen, ob Kategorie Icons in diesem Menü angezeigt werden sollen. Im Feld **Größe (4)** hinterlegst Du die Größe des Bildes in Pixeln.

Beispiel:

<figure><img src="/files/B032k3GVmrNS0sk58B9O" alt="" width="375"><figcaption><p>Kategorie Icons im mobilen Offcanvas Menü</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://themedocs.zenit.design/styling/header/main-navigation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
