# Flyout Navigation

### Übersicht

Die [Flyout Navigation](/academy/fachbegriffe/flyout-navigation.md) öffnet sich, sobald man mit dem Mauszeiger über ein Hauptnavigationselement fährt und dieses weitere Unterkategorien besitzt.

### Grundeinstellungen

<figure><img src="/files/uJIDIf2kF9DbxWCyIX6Z" alt=""><figcaption></figcaption></figure>

<details>

<summary>Maximale Kategorie Tiefe</summary>

**Flyout ausblenden**\
Das Flyout wird nicht mehr angezeigt, auch wenn Unterkategorien existieren.

**K2** \
Unterkategorien werden maximal bis zur zweiten Ebene angezeigt.

**K3** \
Unterkategorien werden maximal bis zur dritten Ebene angezeigt.

</details>

<details>

<summary>Spaltenabstand (in px)</summary>

Definiere den Spaltenabstand zwischen den Kategorien innerhalb des Flyouts.

<img src="/files/Hy6N5PIkcfuFCZ2qIepq" alt="" data-size="original">

</details>

<details>

<summary>Zeilenabstand (in px)</summary>

Definiere den Zeilenabstand zwischen den Kategorien innerhalb des Flyouts.

<img src="/files/gZWd84WoY5t4PgadxBbQ" alt="" data-size="original">

</details>

<details>

<summary>Minimale Spaltenbreite (in px)</summary>

Definieren die minimale Spaltenbreite der Kategorien innerhalb des Flyouts.

<img src="/files/2NXenzwEnFESIyWbJOUY" alt="" data-size="original">

</details>

<details>

<summary>Kategorie Beschreibung anzeigen</summary>

**Ja**\
Zeigt die [Kategorie Beschreibung](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge#allgemein) des Hauptnavigationselements innerhalb der Flyout Navigation unter den Kategorien an.

**Nein** \
Deaktiviert die Kategorie Beschreibung des Hauptnavigationselements.

</details>

<details>

<summary>Rand</summary>

Der untere Rand der Flyout Navigation dient zur visuellen Abgrenzung von Flyout und dem eigentlichen Seiteninhalt. Dabei stehen dir folgende Konfigurationsoptionen zur Verfügung:

***

**Linie**\
Grenzt das Flyout mit einer Linie vom Seiteninhalt ab. Die Linie wird dabei automatisch mit der von dir konfigurierten [Rahmenfarbe](/theme-konfiguration/allgemein/theme-farben.md#rahmen) gefärbt.

**Schatten**\
Zeigt einen Schatten am unteren Rand des Flyout um den Seiteninhalt abzugrenzen. Der Schatten verwendet dabei die von dir definierte [Farbkonfiguration](/theme-konfiguration/allgemein/layout.md#schatten).

</details>

### Typografie

<figure><img src="/files/aV85hvpRc35Ah5sqiWm0" alt=""><figcaption></figcaption></figure>

<details>

<summary>Überschriften Schriftgröße (in px)</summary>

Lege die Schriftgröße für alle Kategorien zweiter Ordnung fest.

</details>

<details>

<summary>Überschriften in Großbuchstaben</summary>

**Ja**\
Schreibt alle Kategorien zweiter Ordnung automatisch in Großbuchstaben. Somit muss der Name im [Kategorie Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge#allgemein) nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt die Kategorie so an wie sie im [Kategorie Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge#allgemein) angelegt wurde.

</details>

<details>

<summary>Überschriften Schriftstärke</summary>

Definiert die Schriftstärke aller Kategorien zweiter Ordnung im Flyout. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie.md) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Überschriften unterstreichen</summary>

**Ja**\
Alle Kategorien zweiter Ordnung werden unterstrichen.

**Nein**\
Kategorien zweiter Ordnung werden nicht unterstrichen.

</details>

<details>

<summary>Unterer Abstand der Überschriften (in px)</summary>

Hinterlege den unteren Abstand aller Kategorien zweiter Ordnung innerhalb der Flyout Navigation.

</details>

<details>

<summary>Basis Link Schriftgröße (in px)</summary>

Lege die Schriftgröße für alle Kategorien dritter Ordnung fest.

</details>

<details>

<summary>Basis Link Schriftstärke</summary>

Definiert die Schriftstärke aller Kategorien dritter Ordnung im Flyout. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie.md) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Basis Link Zeilenabstand (in px)</summary>

Definiere den Zeilenabstand für alle Kategorien dritter Ordnung.

</details>

### Farben

<figure><img src="/files/1ATXinthWpib6dbrUMRZ" alt=""><figcaption></figcaption></figure>

<details>

<summary>Überschriften Farbe</summary>

Hinterlege die Schriftfarbe für alle Kategorien zweiter Ordnung. Standardmäßig wird an dieser Stelle die [Variable](/academy/fachbegriffe/variable.md) für deine [Textfarbe](/theme-konfiguration/allgemein/typografie.md#textfarbe) verknüpft.

</details>

<details>

<summary>Basis Link Farbe</summary>

Definiere die Schriftfarbe für alle Kategorien dritter Ordnung innerhalb der Flyout Navigation.

</details>


---

# 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://docs.atloss.de/theme-konfiguration/header/flyout-navigation.md?ask=<question>
```

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.