# Configuration

***

### Top navigation flyout

**Field type**:\
Select

**Available values**:\
• default\
• ThemeWare®

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

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

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

## Basic configuration

***

### Width

**Field type**:\
Text field

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

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

**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"

**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"

**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"

**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'

***

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


---

# 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.themeware.design/manual/header/top-navigation-flyout/configuration.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.