> 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.

### 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.

### 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)".

### 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.

### 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.

Dropdown-Layout im "Button (kompakt)"-Stil

## 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:

## 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.

Flyout-Layout im Button-Stil (Unschärfe)

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

## 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.