# Flyout Navigation
{% hint style="info" %}
Aktiviere die Flyout Navigation unter\
\&#xNAN;*Header >* [*Main Navigation*](#main-navigation-kategorien) *>* [*Grundeinstellungen*](#grundeinstellungen-1) *> Unternavigation Aussehen*
{% endhint %}
### Farben
Die **Hintergrundfarbe (1)** des Flyout-Menüs kann auch eine teiltransparente Farbe sein. Über den Colorpicker kann die Sichtbarkeit im Alpha-Kanal hinterlegt werden.
T**extfarbe (2)** und **Text:hover-Farbe (3)** müssen nicht unterschiedlich sein. Beim Überfahren mit der Maus rücken die einzelnen Einträge ein paar Pixel zur Seite.
### Grundeinstellungen
Über **Volle Breite (1)** stellst Du ein, ob das Menü die volle Breite des Themes ausnutzen soll. Über **Flyout Header Zeile (2)** kann der Bereich **"Zur Kategorie XY >"** ausgeblendet werden, um ein ablenkungsfreies Design zu kreieren. Verschiedene wählbare **Animationen (5)** runden das Konzept ab.
Das Kategoriebild kann über **Flyout-Teaser (3)** global ein oder ausgeschaltet werden. Oft wünscht man sich das Kategoriebild als [Kategoriebild im Header](/content/kategorie/kategoriebild.md) der Folgekategorie, möchte dieses aber nicht in der Flyout-Navigation darstellen.
**Icon bei externen Links (4)** 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.
Der **Gruppierungsrahmen links (6)** hilft bei vielen Unterkategorien eine Abgrenzung der Spalten hervorzuheben, siehe Beispiel 3.
Die **Navigations-Ebenen (7)** geben an, wie viele Ebenen des Kategoriebaums dargestellt werden sollen. Gezählt wird ab der Hauptkategorien-Ebene.
{% hint style="warning" %}
**Achtung:** In den Einstellungen des Sales-Channels muss die Anzahl der Hauptnavigations-Ebenen mindestens so hoch sein wie hier angegeben.
Diese Einstellung behebt die Shopware Bugs NEXT-9461 und NEXT-13203.
{% endhint %}
**Spalten (8)** gibt an, auf wie viele Spalten die Menüpunkte im Flyout-Menü angeordnet werden sollen.
Über die **Dynamische Spaltenfüllung (9)** werden Inhalte nicht zeilenweise, sondern spaltenweise von oben nach unten gefüllt. Der Browser teilt den verfügbaren Platz automatisch in mehrere vertikale Spalten auf. Dabei versucht das Layout, alle Spalten möglichst gleich hoch zu halten (Balancing).\
Je nach Höhe der einzelnen Elemente kann der Browser Inhalte deshalb in andere Spalten verschieben. So können in einer Spalte auch mehrere Oberkategorien Platz finden.
{% tabs %}
{% tab title="Dynamische Spaltenfüllung" %}
|
Kategorie 1 Unterkategorie Unterkategorie Unterkategorie
Kategorie 2
Kategorie 3
|
Kategorie 4 Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie
|
Kategorie 5 Unterkategorie Unterkategorie
Kategorie 6 Unterkategorie Unterkategorie Unterkategorie
Kategorie 4 Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie Unterkategorie
|
Kategorie 5 Unterkategorie Unterkategorie
|
Kategorie 6 Unterkategorie Unterkategorie Unterkategorie
|
| {% endtab %} | | |
| {% endtabs %} | | |
Aktivierst Du die Option **Inhalte scrollbar (10)** definiert Du mit der **Maximale Höhe (11)** die Begrenzung des Flyouts und die Darstellug der Scrollleisten. Damit kannst Du sicherstellen, dass Deine Kunden alle Navigationspunkte auch bei umfangreicheren Navigationen komfortabel erreichen können **- auch wenn der Header Sticky ist.**
### Kategoriebilder von Unterkategorien
**Kategoriebilder von Unterkategorien anzeigen (1)** aktiviert die Kategoriebilder global für Unterkategorien deiner ersten Haupt-Navigationsebene in der Flyout-Navigation. Als Bild wird das zugewiesene Kategorie-Bild verwendet.
In den Zusatzfeldern der Kategorie kannst Du diese Einstellung je Kategorie umstellen. Zusätzlich kannst Du ein alternatives Kategorie-Bild hinterlegen, wenn Du nicht das eigentliche Kategorie-Bild anzeigen möchtest.
Du kannst das **Aussehen (2)** auf "Text unter Bild" oder "Text neben Bild" stellen.
Du kannst den **Zwischenabstand (3)** zwischen den Kachel bestimmen.
Du kannst die **Hintergrundfarbe (4 und 5)** und die **Textfarbe (6 und 7)** der Kachel des Kategoriebildes konfigurieren.
Zusätzlich kannst Du einen **Rahmen (8 und 9)** und einen **Schlagschatten (10 und 11)** einstellen.
Die **Maximale Bildhöhe (12)** bestimmt die maximale Höhe der Kacheln. Das sorgt dafür, dass die Kacheln auch bei unterschiedlichen Bildformaten immer in einer einheitlichen Größe angezeigt werden.
Mit dem **Anzeigemodus (13)** entscheidest Du, wie das Bild dargestellt werden soll:
* **Original:** Das Bild wird in der Originalgröße der Bilddatei ausgespielt.
* **Zugeschnitten:** Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
* **Feste Höhe:** Das Bild wird gestreckt und auf die Größe des Containers angepasst. Es wird hierbei nicht beschnitten.
Die **Vertikale Bildausrichtung (14)** legt fest, wie sich das Bild vertikal am Container orientiert.
Die **Horizontale Bildausrichtung (15)** legt fest, wie sich das Bild horizontal am Container orientiert.
Mit dem **Seitenverhältnis (16)** stellst Du ein, ob die Kacheln im Hoch- oder Querformat angezeigt werden.
Der **Innenabstand (17)** legt fest, wieviel Abstand zwischen dem Inhalt der Kachel zum Rand dargestellt wird.
Du kannst eine **Hover-Animation (18)** einstellen. Dabei kannst Du zwischen "Keine" und "Bildzoom" wählen.
Beispiel:
### Elemente
Über die Einstellung im Block Elemente kannst Du die einzelnen Einträge der Flyout-Navigation formatieren.
Beispiel 1:
{% hint style="info" %}
Die Hintergrundfarbe kann auch transparent sein. Mit der kleinen rgba-Funktion kann zusätzlich zur Farbe eine Sichtbarkeit angegeben werden.
`rgba($sw-color-brand-primary, 90%)`
{% endhint %}
Beispiel 2:
Beispiel 3:
### 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.
Ü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.
Beispiel:
Kategorie Icons im Flyout Menü
---
# Agent Instructions: 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:
```
GET https://themedocs.zenit.design/styling/header/flyout-navigation.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.