Mega Menu (Flyout)

The submenu of the top navigation shows the subcategories as soon as a menu item is addressed. ThemeWare® comes with five layout types for this – from the wide flyout through the card view to the compact dropdown – and several styles for the menu items within each layout type.

Layout types

You set the layout type in the "Header" tab => "Top navigation flyout" area => "Top navigation flyout" configuration. It then applies to the entire main navigation. You can find all settings in detail under Top navigation flyout.

Tip: You can override the layout type per category – for example a flyout with teasers for "Clothing" and a slim dropdown for "Sale". To do so, open the category in the Shopware admin and select the desired layout type under "Custom fields" => "Flyout (... Pro)" => "Top navigation flyout". The default value "inherit from theme configuration" applies the global setting. With "no submenu" you hide the submenu for a single category.

The flyout uses the full width and shows the subcategories in columns – the layout type with the most room for deep category trees.

If the category has a display image, it is shown next to the subcategories. With "Show category image" in the "Basic configuration" section you hide it, the subcategories then use the full width.

The subcategories of the first level sit in a rail on the left, the content next to it changes as soon as an entry is addressed. This keeps the submenu tidy even with many categories.

Teaser

Next to the categories there is room for up to three teasers with image, text and link – for a campaign or a new collection, for instance. The more teasers you add, the more space the teaser area gets. You maintain the teasers on the category under "Custom fields" => "Flyout (... Pro)". Without teasers of its own, the display image of the category appears as long as "Show category image" is active.

Cards

Every subcategory of the first level is displayed as a card with its category image. Categories without an image do not appear as a card – so make sure every category has an image if you use this layout type.

The dropdown opens a narrow card directly below the menu item instead of using the full width – suitable for flat category trees or individual menu items.

Dropdown layout with "button (compact)" style

Styles

How the individual menu items look is set separately for the flyout and the dropdown:

"Header" tab => "Top navigation flyout" area => "Design" section => "Flyout" configuration

The options are "List (Clean)", "List (Shopware)", "List in columns (Shopware 5)" and "Buttons".

"Header" tab => "Top navigation flyout" area => "Design" section => "Dropdown navigation" configuration

The options are "List (Clean)", "Buttons" and "Buttons (compact)".

The flyout style also applies to the "Cards", "Sidebar" and "Teaser" layout types – with one exception: "List in columns (Shopware 5)" only applies to the flyout (see below).

The styles of the dropdown navigation are still in development. We welcome your constructive feedback.

You can use the button style when hovering over them or apply consistent colors to the buttons:

You colour the surfaces of the menu items in the "Header" tab => "Top navigation flyout" area => "Colour configuration" section via the "Background colour (menu items)", "Background colour (menu items) @hover" and "Background colour (menu items) @active" configurations. In the flyout they are applied in the "Buttons" style, in the dropdown navigation in the "Buttons (compact)" and "Buttons" styles.

Flyout and dropdown use the same colours and therefore look identical even if you use both layout types side by side.

Liquid glass effect

Via the "Glass effect [px] (panel)" configuration – also in the "Colour configuration" section – you blur the page content behind the panel. The effect only becomes visible once you choose a semi-transparent colour as the "Background colour (panel)". Recommended value: 10.

Flyout layout with button stlye and glass effect (blur)

Of course, the Glass effect works in all layout types:

The "Shopware 5" style changes the column layout in the flyout layout to match the arrangement in Shopware 5's "Advanced Menu". The categories are not wrapped into rows but flow across four columns – if a category no longer fits into its column, it moves into the next one. If a category image is shown next to the categories, there are three columns.

The style only applies to the flyout. The "Cards", "Sidebar" and "Teaser" layout types bring their own arrangement and use the "List (Clean)" style.

Because the columns are filled by height, this style is less suitable if the number of subcategories varies greatly.

Summary

Theme configuration

Tab "Header" => Block "Top navigation flyout" => Top navigation flyout
Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration" => Show category image
Tab "Header" => Block "Top navigation flyout" => Section "Design" => Flyout
Tab "Header" => Block "Top navigation flyout" => Section "Design" => Dropdown navigation
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration" => Background colour (menu items)
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration" => Background colour (menu items) @hover
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration" => Background colour (menu items) @active
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration" => Background colour (panel)
Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration" => Glass effect [px] (panel)
All settings in detail: Top navigation flyout

Custom fields

Last updated on October 30, 2026

Mega Menu (Flyout)

Layout types

Default Flyout