Configuration

Field type: Select

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

Example value: ThemeWare® Flyout

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

Technical name: twt-nav-main-flyout

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

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

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

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

The Shopware 5 layout is not recommended if the number of subcategories varies significantly.

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

Set the indentation for subcategories in the flyout (in pixels).

Default: 20

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

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.

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

Choose whether the flyout matches the container or spans full width.

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

Note: This configuration refers to the separator line in the "Shopware 6" layout type.

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