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

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

***

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.themeware.design/manual/header/top-navigation-flyout/configuration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.