> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/anleitungen/header/mega-menue-flyout.md).

# Mega-Menü einrichten

Mit ThemeWare® erweiterst du das Flyout deiner Hauptnavigation um bis zu drei Teaser mit Bild, Text und Link. So hebst du im Mega-Menü Aktionen, Themenwelten oder Top-Produkte hervor und führst deine Kunden direkt aus der Navigation zum passenden Ziel.

{% hint style="info" %}
**Hinweis**: Die Teaser werden pro Kategorie über Zusatzfelder gepflegt und erscheinen im "ThemeWare® Flyout" neben den Unterkategorien, sobald du den passenden Flyout-Typ in der Theme-Konfiguration ausgewählt hast.
{% endhint %}

***

## Voraussetzungen

* eine Kategorie in der Hauptnavigation, deren Flyout du mit Teasern erweitern möchtest
* ein bis drei Bilder für die Teaser im Shopware-Medienmanager
* optional die Zieladressen (Links) für die Teaser

***

## Schritt 1: Flyout-Typ im Theme wählen

> "Theme-Manager" => dein ThemeWare®-Theme => Tab "Header" => Bereich "Top-Navigation Flyout"

Das Feld **"Top-Navigation Flyout"** bietet mehrere Darstellungen für die Untermenüs (siehe Abschnitt „Weitere Flyout-Modi" unten). Für die Teaser wählst du **"ThemeWare® Flyout mit Teasern"** und speicherst deine Änderungen.

***

## Schritt 2: Teaser an der Kategorie hinterlegen

> "Kataloge" => "Kategorien" => Kategorie wählen => Tab "Allgemein" => Bereich "Zusatzfelder" => Zusatzfeld-Set "Flyout (... Pro)"

Pflege je Teaser die folgenden Zusatzfelder (bis zu 3 Teaser stehen zur Verfügung):

* **Flyout-Teaser 1–3 – Bild** – das Teaserbild aus dem Medienmanager
* **Flyout-Teaser 1–3 – Text** – der Text unter dem Bild
* **Flyout-Teaser 1–3 – Link** – die Ziel-URL; der gesamte Teaser ist klickbar

Speichere die Kategorie.

{% hint style="info" %}
**Hinweis**: Lasse das Bild leer, um einen Teaser auszublenden. Der Alternativtext des Bildes wird aus dem Medienmanager übernommen.
{% endhint %}

***

## Ergebnis

Öffnest du das Flyout der Kategorie in der Hauptnavigation, erscheinen die Teaser nun neben den Unterkategorien. Wird nichts angezeigt, leere einmal den Shopware-Cache.

{% hint style="success" %}
**ThemeWare® Tipp**: Vergib aussagekräftige Alternativtexte im Medienmanager – sie verbessern Zugänglichkeit und SEO. Möchtest du den Flyout-Typ nur für eine einzelne Kategorie abweichend setzen, nutze das Kategorie-Zusatzfeld "Top-Navigation Flyout".
{% endhint %}

***

## Weitere Flyout-Modi

Über das Feld "Top-Navigation Flyout" bestimmst du generell, wie die Untermenüs deiner Hauptnavigation dargestellt werden – die Teaser sind nur einer von mehreren Modi:

* **Shopware-Standard** – die native Shopware-Navigation (ohne ThemeWare®-Flyout)
* **ThemeWare® Flyout** – das Standard-Flyout mit den Unterkategorien
* **ThemeWare® Dropdown** – die Untermenüs als kompaktes Dropdown
* **ThemeWare® Flyout mit Karten** – zeigt die direkten Unterkategorien als Bildkarten
* **ThemeWare® Flyout mit Sidebar** – Flyout mit seitlicher Navigationsleiste
* **ThemeWare® Flyout mit Teasern** – das in dieser Anleitung beschriebene Flyout mit Teasern

{% hint style="info" %}
**Hinweis**: Den Modus legst du global in der Theme-Konfiguration fest. Über das Kategorie-Zusatzfeld "Top-Navigation Flyout" kannst du ihn pro Kategorie überschreiben – das wirkt nur, wenn die globale Einstellung nicht auf "Shopware-Standard" steht.
{% endhint %}

***

## Weiterführende Informationen

Alle Flyout-Modi mit Beispielbildern findest du im ThemeWare® Handbuch:

{% embed url="<https://doku.themeware.design/handbuch/header/top-navigation-flyout/konfiguration>" %}
ThemeWare® Handbuch ⇒ Top-Navigation Flyout
{% endembed %}

Die Teaser-Zusatzfelder im Detail:

{% embed url="<https://doku.themeware.design/zusatzfunktionen/zusatzfelder/kategorien/flyout>" %}
ThemeWare® Handbuch ⇒ Flyout
{% endembed %}