> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/manual/header/top-navigation-flyout/configuration.md).

# Configuration

### Top navigation flyout

**Field type**:\
Select

**Available values**:\
• Shopware default\
• ThemeWare® Flyout\
• ThemeWare® Dropdown\*\
• ThemeWare® Flyout with cards\
• ThemeWare® Flyout with sidebar\
• ThemeWare® Flyout with teasers

**Example value**:\
`ThemeWare® Flyout`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout"

**Technical name**:\
`twt-nav-main-flyout`

{% hint style="info" %}
Choose how the submenus of the top navigation are displayed.

Each category can also override this globally via the category custom field "Top navigation flyout".
{% endhint %}

<figure><img src="/files/AbNPQslfXAUMD0GSGNfZ" alt=""><figcaption><p>ThemeWare® Dropdown</p></figcaption></figure>

<figure><img src="/files/erIypbh5BStk9uC9d8oV" alt=""><figcaption><p>ThemeWare® Flyout with cards</p></figcaption></figure>

<figure><img src="/files/zWA0Cn1uFUzh77OYzYDE" alt=""><figcaption><p>ThemeWare® Flyout with sidebar</p></figcaption></figure>

<figure><img src="/files/6oNqgOp2Rio49akYss7P" alt=""><figcaption><p>ThemeWare® Flyout with teasers</p></figcaption></figure>

{% hint style="info" %}
**\*) Note**: Currently not available in the "Full-width sticky header".
{% endhint %}

## Basic configuration

***

### Width

**Field type**:\
Text field

**Example value**:\
`100%`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"

**Technical name**:\
`twt-nav-main-flyout-width`

{% hint style="info" %}
Set the width for the flyout (in pixels).

**Default**: 100%

A value not equal to 100% is automatically converted to pixels and used as a max-width. In this case, the flyout extends over the full width but will not be larger than the selected value.

**Example**: 1080px
{% endhint %}

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Shopware 6\
• ThemeWare®\
• Shopware 5

**Example value**:\
`ThemeWare®`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"

**Technical name**:\
`twt-nav-main-flyout-style`

{% hint style="info" %}
The Shopware 5 layout is not recommended if the number of subcategories varies significantly.
{% endhint %}

***

### Animation

**Field type**:\
Select

**Available values**:\
• no animation (default)\
• back in up\
• fade in\
• swing in down

**Example value**:\
`fade in`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"

**Technical name**:\
`twt-nav-main-flyout-animation`

***

### Indentation

**Field type**:\
Text field

**Example value**:\
`10`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"

**Technical name**:\
`twt-nav-main-flyout-categories-margin-left`

{% hint style="info" %}
Set the indentation for subcategories in the flyout (in pixels).

**Default**: 20
{% endhint %}

## Basic configuration 'ThemeWare® Flyout'

***

### Navigation levels

**Field type**:\
Select

**Available values**:\
• 1 level\
• 2 levels\
• 3 levels (default)\
• 4 levels\
• 5 levels

**Example value**:\
`3 levels`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"

**Technical name**:\
`twt-nav-main-max-depth`

{% hint style="info" %}
Maximum number of category levels rendered in the navigation (applies to the "ThemeWare® Flyout", "ThemeWare® Dropdown" and "ThemeWare® Flyout with sidebar" modes).

Will only render up to the sales channel's "Navigation levels" setting (Admin → Sales Channels → \[Channel] → Navigation), as deeper categories are not loaded into the storefront.
{% endhint %}

***

### Sizing mode

**Field type**:\
Select

**Available values**:\
• Container-Max-Width (Full-width Boxed)\
• 100% (Full-width)\
• Boxed\
• Custom width

**Example value**:\
`Container-Max-Width (Full-width Boxed)`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration 'ThemeWare® Flyout'"

**Technical name**:\
`twt-nav-main-flyout-sizing-mode`

{% hint style="info" %}
Choose whether the flyout matches the container or spans full width.
{% endhint %}

## Colour configuration

***

### Text colour (Categories)

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-flyout-categories-color`

***

### Text colour (Categories) @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-flyout-categories-color-hover`

***

### Text colour (Categories) @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-flyout-categories-color-active`

***

### Icon colour (Categories)

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-flyout-categories-icon-color`

***

### Background colour (Categories)

**Field type**:\
Color picker

**Example value**:\
`#eef2f5`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-flyout-background-color`

***

### Text colour (Seperator)

**Field type**:\
Color picker

**Example value**:\
`#bcc1c7`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-flyout-seperator-color`

{% hint style="info" %}
**Note**: This configuration refers to the separator line in the "Shopware 6" layout type.
{% endhint %}

## Level 1

***

### Font family

**Field type**:\
Select

**Available values**:\
• Text\
• Headlines

**Example value**:\
`Text`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 1"

**Technical name**:\
`twt-nav-main-flyout-font-family`

***

### Font size

**Field type**:\
Number field

**Example value**:\
`18`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 1"

**Technical name**:\
`twt-nav-main-flyout-font-size`

***

### Font weight

**Field type**:\
Select

**Available values**:\
• light\
• normal\
• bold

**Example value**:\
`normal`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 1"

**Technical name**:\
`twt-nav-main-flyout-font-weight`

***

### Text formatting

**Field type**:\
Select

**Available values**:\
• none\
• uppercase\
• lowercase\
• capitalize

**Example value**:\
`none`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 1"

**Technical name**:\
`twt-nav-main-flyout-text-transform`

## Level 2

***

### Font family

**Field type**:\
Select

**Available values**:\
• Text\
• Headlines

**Example value**:\
`Text`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 2"

**Technical name**:\
`twt-nav-main-flyout-level1-font-family`

***

### Font size

**Field type**:\
Number field

**Example value**:\
`16`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 2"

**Technical name**:\
`twt-nav-main-flyout-level1-font-size`

***

### Font weight

**Field type**:\
Select

**Available values**:\
• light\
• normal\
• bold

**Example value**:\
`normal`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 2"

**Technical name**:\
`twt-nav-main-flyout-level1-font-weight`

***

### Text formatting

**Field type**:\
Select

**Available values**:\
• none\
• uppercase\
• lowercase\
• capitalize

**Example value**:\
`none`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 2"

**Technical name**:\
`twt-nav-main-flyout-level1-text-transform`

## Level 3...

***

### Font family

**Field type**:\
Select

**Available values**:\
• Text\
• Headlines

**Example value**:\
`Text`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."

**Technical name**:\
`twt-nav-main-flyout-level2-font-family`

***

### Font size

**Field type**:\
Number field

**Example value**:\
`16`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."

**Technical name**:\
`twt-nav-main-flyout-level2-font-size`

***

### Font weight

**Field type**:\
Select

**Available values**:\
• light\
• normal\
• bold

**Example value**:\
`normal`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."

**Technical name**:\
`twt-nav-main-flyout-level2-font-weight`

***

### Text formatting

**Field type**:\
Select

**Available values**:\
• none\
• uppercase\
• lowercase\
• capitalize

**Example value**:\
`none`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."

**Technical name**:\
`twt-nav-main-flyout-level2-text-transform`

## Categorie button

***

### Show flyout bar

**Field type**:\
Select

**Available values**:\
• don't show\
• show top\
• show bottom

**Example value**:\
`show bottom`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"

**Technical name**:\
`twt-nav-main-flyout-bar-show`

***

### Padding top/bottom

**Field type**:\
Number field

**Example value**:\
`15`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"

**Technical name**:\
`twt-nav-main-flyout-bar-padding-top-bottom`

***

### Padding left/right

**Field type**:\
Number field

**Example value**:\
`15`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"

**Technical name**:\
`twt-nav-main-flyout-bar-padding-left-right`

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"

**Technical name**:\
`twt-nav-main-flyout-bar-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"

**Technical name**:\
`twt-nav-main-flyout-bar-color-hover`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#e3e8ec`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Categorie button"

**Technical name**:\
`twt-nav-main-flyout-bar-background-color`

## Close button

***

### Padding

**Field type**:\
Number field

**Example value**:\
`15`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation flyout" => Section "Close button"

**Technical name**:\
`twt-nav-main-flyout-close-btn-padding`