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

# Mega-Menü (Flyout)

Das Untermenü der Top-Navigation zeigt die Unterkategorien an, sobald ein Menüpunkt angesteuert wird. ThemeWare® bringt dafür fünf Darstellungsarten mit – vom breiten Flyout über die Kartenansicht bis zum kompakten Dropdown – und je Darstellungsart mehrere Stile für die Menüpunkte.

## Darstellungsarten

Die Darstellungsart legst du im Tab "Header" => Bereich "Top-Navigation Flyout" => Konfiguration "Top-Navigation Flyout" fest. Sie gilt dann für die gesamte Hauptnavigation.

{% hint style="success" %}
**Tipp**: Du kannst die Darstellungsart pro Kategorie überschreiben – zum Beispiel ein Flyout mit Teasern für "Bekleidung" und ein schlankes Dropdown für "Sale". Öffne dazu die Kategorie im Shopware-Admin und wähle unter "Zusatzfelder" => "Flyout (Genesis Pro)" => "Top-Navigation Flyout" die gewünschte Darstellungsart. Der Standardwert "vererbt aus Theme-Konfiguration" übernimmt die globale Einstellung. Mit "kein Untermenü" blendest du das Untermenü für eine einzelne Kategorie aus.
{% endhint %}

### Standard Flyout

Das Flyout nutzt die volle Breite und zeigt die Unterkategorien in Spalten – die Darstellungsart mit dem meisten Platz für tiefe Kategoriebäume.

<figure><img src="/files/kuiZMDaHSYn7yH2G6KyY" alt=""><figcaption><p>Flyout-Layout im Button-Stil</p></figcaption></figure>

<div><figure><img src="/files/hRRARTjGpakM17ai1qv7" alt=""><figcaption><p>Flyout-Layout im Listen-Stil</p></figcaption></figure> <figure><img src="/files/Ssn5tqqpHgpi0SxJZaa7" alt=""><figcaption><p>Flyout-Layout im SW6-Stil</p></figcaption></figure></div>

### Sidebar

Die Unterkategorien der ersten Ebene stehen als Schiene links, der Inhalt daneben wechselt beim Ansteuern eines Eintrags. Das hält das Untermenü auch bei vielen Kategorien übersichtlich.

<figure><img src="/files/11ZUitIu0yPVHrUZoYaw" alt=""><figcaption><p>Sidebar-Layout im Button-Stil</p></figcaption></figure>

<div><figure><img src="/files/HgH3bMzKwmG5I7MXVIXl" alt=""><figcaption><p>Sidebar-Layout im Listen-Stil</p></figcaption></figure> <figure><img src="/files/CJ8ze4Mw1nDPSb8Ee7Ep" alt=""><figcaption><p>Sidebar-Layout im SW6-Stil</p></figcaption></figure></div>

### Teaser

Neben den Kategorien stehen bis zu drei Teaser mit Bild, Text und Link – zum Beispiel für eine Aktion oder eine neue Kollektion. Je mehr Teaser du hinterlegst, desto mehr Platz bekommt der Teaser-Bereich. Die Teaser pflegst du an der Kategorie unter "Zusatzfelder" => "Flyout (Genesis Pro)".

<figure><img src="/files/qgolG9q4zwlveerkVkI9" alt=""><figcaption><p>Teaser-Layout im Button-Stil</p></figcaption></figure>

<div><figure><img src="/files/PThWuMOWEHw6PAYZKrmO" alt=""><figcaption><p>Teaser-Layout im Listen-Stil</p></figcaption></figure> <figure><img src="/files/nif1LPAepaX0FhFsoRRX" alt=""><figcaption><p>Teaser-Layout im SW6-Stil</p></figcaption></figure></div>

### Karten

Jede Unterkategorie der ersten Ebene wird als Karte mit ihrem Kategoriebild dargestellt. Kategorien ohne Bild erscheinen nicht als Karte – hinterlege also für alle Kategorien ein Bild, wenn du diese Darstellungsart nutzt.

<figure><img src="/files/GzQcxUByAlP8Tf0uyRy8" alt=""><figcaption><p>Karten-Layout</p></figcaption></figure>

### Dropdown

Das Dropdown öffnet eine schmale Karte direkt unter dem Menüpunkt, statt die volle Breite zu nutzen – passend für flache Kategoriebäume oder einzelne Menüpunkte.

<figure><img src="/files/vsTI7sNzepY4dhsg2zPv" alt=""><figcaption><p>Dropdown-Layout im Button-Stil</p></figcaption></figure>

<div><figure><img src="/files/kLaoSHB4E5aq5CiiSO7S" alt=""><figcaption><p>Dropdown-Layout im "Button (kompakt)"-Stil</p></figcaption></figure> <figure><img src="/files/1nsiETilakOagYXZmXDf" alt=""><figcaption><p>Dropdown-Layout im Listen-Stil</p></figcaption></figure></div>

## Stile

Wie die einzelnen Menüpunkte aussehen, legst du getrennt für Flyout und Dropdown fest:

> * Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'" => Konfiguration "Stil"
>   * Zur Wahl stehen "Liste (Shopware 6)", "Liste", "Liste in Spalten (Shopware 5)" und "Buttons".
> * Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Dropdown'" => Konfiguration "Stil"
>   * Zur Wahl stehen "Liste", "Buttons (kompakt)" und "Buttons".

Der Flyout-Stil gilt auch für die Darstellungsarten "Karten", "Sidebar" und "Teaser" – mit einer Ausnahme: "Liste in Spalten (Shopware 5)" wirkt nur im Flyout (siehe unten).

{% hint style="info" %}
Die Stile der Dropdown-Navigation sind noch in Entwicklung. Wir freuen uns über dein konstruktives [Feedback](https://service.themeware.design/feature-request).
{% endhint %}

## Dropdown: Button-Stil

Du kannst den Button-Stil beim Hover nutzen oder die Buttons durchgängig einfärben:

<div><figure><img src="/files/11ZUitIu0yPVHrUZoYaw" alt=""><figcaption><p>Buttons bei Hover eingefärbt</p></figcaption></figure> <figure><img src="/files/1KqmZiDMb0aBamEhZ5Sp" alt=""><figcaption><p>Buttons durchgängig eingefärbt</p></figcaption></figure></div>

## Farben der Menüpunkte

Die Flächen der Menüpunkte färbst du im Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration" über die Konfigurationen "Hintergrundfarbe (Menüpunkte)", "Hintergrundfarbe (Menüpunkte) @hover" und "Hintergrundfarbe (Menüpunkte) @active". Im Flyout werden sie im Stil "Buttons" angewendet, in der Dropdown-Navigation in den Stilen "Buttons (kompakt)" und "Buttons".

Flyout und Dropdown greifen auf dieselben Farben zu und sehen dadurch auch dann gleich aus, wenn du beide Darstellungsarten parallel einsetzt.

## "Liquid glass"-Effekt

Über die Konfiguration "Glaseffekt \[px] (Panel)" – ebenfalls im Abschnitt "Farbkonfiguration" – zeichnest du den Seiteninhalt hinter dem Panel weich. Der Effekt wird erst sichtbar, wenn du als "Hintergrundfarbe (Panel)" eine halbtransparente Farbe wählst. Empfohlener Wert: 10.

<figure><img src="/files/0JybKdUbMQ0ErIZLxWK3" alt=""><figcaption><p>Flyout-Layout im Button-Stil (Unschärfe)</p></figcaption></figure>

Der Glass-Effekt funktioniert natürlich in allen Darstellungsarten:

<div><figure><img src="/files/sVNsYRD9Jidwn7CwhOnt" alt=""><figcaption></figcaption></figure> <figure><img src="/files/UdwJoHoD9Vn6oh9KAoVI" alt=""><figcaption></figcaption></figure> <figure><img src="/files/lH0FDMmLPEngs6HI4NXu" alt=""><figcaption></figcaption></figure> <figure><img src="/files/i4osydsbwBZJmff51TTY" alt=""><figcaption></figcaption></figure></div>

## Flyout: "Shopware 5" Stil

Der "Shopware 5"-Stil ändert die Spaltendarstellung im Flyout-Layout in die Anordnung im "Erweiterten Menü" von Shopware 5. Die Kategorien werden dabei nicht zeilenweise umbrochen, sondern fließen in vier Spalten – passt eine Kategorie nicht mehr in ihre Spalte, rutscht sie in die nächste. Steht neben den Kategorien ein Kategoriebild, sind es drei Spalten.

{% hint style="info" %}
Der Stil wirkt nur im Flyout. Die Darstellungsarten "Karten", "Sidebar" und "Teaser" bringen ihre eigene Anordnung mit und verwenden den Stil "Liste".
{% endhint %}

Weil die Spalten nach Höhe gefüllt werden, ist dieser Stil weniger gut geeignet, wenn die Anzahl der Unterkategorien stark schwankt.

<div><figure><img src="/files/Rx1dR19swksmBrXltoqU" alt=""><figcaption></figcaption></figure> <figure><img src="/files/2mJPkApO9hKAQr9N2hkm" alt=""><figcaption></figcaption></figure></div>