Configuration

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

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

*) Note: Currently not available in the "Full-width sticky header".

Note: In the layout type "ThemeWare® Flyout with cards", categories of the type "folder" are not displayed because every card needs a target.

Design

Field type:
Select

Available values:
• List
• List (Shopware 6)
• List in columns (Shopware 5)
• Buttons

Example value:
List

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

Technical name:
twt-nav-main-flyout-design

Select the design of the flyout.

List (Shopware 6): A line to the left of the categories ensures a clear structure in the flyout.

List: Instead of the line used in Shopware 6, arrows are displayed in front of the categories, as in ThemeWare® for Shopware 5.

List in columns (Shopware 5): The categories are arranged in columns as in the flyout of Shopware 5, the links keep the arrows of the design "List". This design only applies to the flyout — "Flyout with cards", "Flyout with sidebar" and "Flyout with teasers" keep the design "List".

Buttons: Every category gets its own surface with rounded corners. The surface colours are set in the "Colours" section.

Note: The Shopware 5 layout is not recommended if the number of subcategories varies greatly.

Field type:
Select

Available values:
• List
• Buttons
• Buttons (compact)

Example value:
Buttons (compact)

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

Technical name:
twt-nav-main-dropdown-design

Select the design of the dropdown navigation.

List: Plain text without surfaces and without separator lines. The arrow on menu items with subcategories remains.

Buttons (compact): Every menu item is a surface across the full width of the card, separated by lines.

Buttons: The card gets inner spacing, the menu items become inset surfaces with rounded corners.

Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.

Basic configuration

Animation

Field type:
Select

Available values:
• no animation (default)
• Fade in
• Fade in from below
• Bounce from below
• Fade in from above
• Bounce from above
• Unfold (3D) #beta

Example value:
Fade in

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

Technical name:
twt-nav-main-flyout-animation

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"

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.

Custom 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

Set the width for the flyout.

Default: 100%

A value other than 100% is used as max-width. In this case, the flyout extends across the full width but does not exceed the selected value.

Example: 1080px

Drop shadow

Field type:
Select

Available values:
• no shadow
• Small shadow
• Regular shadow
• Larger shadow
• Soft shadow (ThemeWare®)

Example value:
Soft shadow (ThemeWare®)

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

Technical name:
twt-nav-main-flyout-box-shadow-type

Drop shadow of the flyout panel.

The graduated shadows match the ones of the dropdown navigation, but are pulled in at the top so that nothing shows above the navigation bar — the flyout sits flush below it.

Soft (ThemeWare®) is the long-standing ThemeWare® shadow: wide and soft.

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

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

Default: 20

Columns

Field type:
Select

Available values:
• Automatic
• 3 columns
• 4 columns
• 5 columns
• 6 columns

Example value:
Automatic

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

Technical name:
twt-nav-main-flyout-cards-columns

Set how many cards are displayed side by side. The value applies to very large screens, smaller screens reduce the number automatically: at most 4 cards on desktop, at most 3 on tablets and always 2 on smartphones.

Automatic: 4 cards from large screens — in the sizing mode "100% (Full-width)" 6 cards from very large screens.

Note: This setting only applies to the "ThemeWare® Flyout with cards" mode.

Drop shadow

Field type:
Select

Available values:
• no shadow (default)
• Small shadow (Bootstrap)
• Regular shadow (Bootstrap)
• Larger shadow (Bootstrap)

Example value:
Regular shadow (Bootstrap)

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

Technical name:
twt-nav-main-dropdown-box-shadow-type

Adds a drop shadow to the submenus.

Beta: This feature may change in an upcoming update, but feel free to test it and send us your feedback.