> 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 %}

### Layoutbeispiele

<div><figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FwmYDCNuOTy5NjOb7IwbA%2Ftwt-nav-flyout-liste-de.png?alt=media&amp;token=13976604-3021-4dd0-8084-ee019fe97bc9" alt=""><figcaption><p>Flyout</p></figcaption></figure> <figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FYWymCefdGWnCckSIE5gr%2Ftwt-nav-dropdown-kompakt-de.png?alt=media&amp;token=437a1372-5d6c-490b-8e61-650436125733" alt=""><figcaption><p>Dropdown</p></figcaption></figure> <figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FpPNBVZbTbpT6kV0YpIZq%2Ftwt-nav-cards-de.png?alt=media&amp;token=155770a9-6189-4fa9-87d8-45ad9def1b68" alt=""><figcaption><p>Karten</p></figcaption></figure> <figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FPMLsOCHQrcSNJcBUbbCJ%2Ftwt-nav-sidebar-buttons-transparent-de.png?alt=media&amp;token=9c51ce3e-7a19-4c2d-8ba1-28869b08df54" alt=""><figcaption><p>Sidebar</p></figcaption></figure> <figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FRqiXrvuh8wKVS6oh4oJ9%2Ftwt-nav-teaser-buttons-transparent-de.png?alt=media&amp;token=80cb9240-99f4-4d12-9c61-a1e6df38da54" alt=""><figcaption><p>Teaser</p></figcaption></figure></div>

***

## Aussehen der Menüpunkte

Unabhängig vom Modus bestimmst du, wie die einzelnen Menüpunkte im Untermenü aussehen.

> "Theme-Manager" => dein ThemeWare®-Theme => Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'" => Feld "Stil"

* **Liste (Shopware 6)** – eine Linie links neben den Kategorien
* **Liste** – Pfeile vor den Kategorien
* **Liste in Spalten (Shopware 5)** – die Anordnung aus dem "Erweiterten Menü" von Shopware 5; wirkt nur im Modus "ThemeWare® Flyout"
* **Buttons** – jede Kategorie bekommt eine eigene Fläche mit abgerundeten Ecken

Für das Dropdown gibt es eine eigene Auswahl im Abschnitt "Basiskonfiguration 'ThemeWare® Dropdown'": "Liste", "Buttons (kompakt)" und "Buttons".

Die Farben der Flächen und den Glaseffekt stellst du im selben Bereich im Abschnitt "Farbkonfiguration" ein – über "Hintergrundfarbe (Menüpunkte)" samt @hover und @active sowie "Glaseffekt \[px] (Panel)".

{% hint style="success" %}
**ThemeWare® Tipp**: Der Glaseffekt zeichnet den Seiteninhalt hinter dem Untermenü weich. Sichtbar wird er erst, wenn du bei "Hintergrundfarbe (Panel)" eine halbtransparente Farbe wählst – ein Wert von 10 ist ein guter Startpunkt.
{% endhint %}

***

## Weiterführende Informationen

Alle Darstellungsarten und Stile mit Beispielbildern findest du im ThemeWare® Handbuch:

{% embed url="<https://doku.themeware.design/zusatzfunktionen/erweiterungen/mega-menu-flyout>" %}
ThemeWare® Handbuch ⇒ Mega-Menü (Flyout)
{% endembed %}

Alle Konfigurationsfelder des Flyouts im Detail:

{% 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 %}