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.

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 (Genesis 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.

Default Flyout

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

Flyout layout with button style

Flyout layout with list style

Flyout layout with SW6 style

Sidebar

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.

Sidbar layout with button style

Sidbar layout with list style

Sidbar layout with SW6 style

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 (Genesis Pro)".

Teaser layout with button style

Teaser layout with list style

Teaser layout with SW6 style

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.

Cards layout

Dropdown

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 style

Dropdown layout with "button (compact)" style

Dropdown layout with list style

Styles

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

• "Header" tab => "Top navigation flyout" area => "Basic configuration 'ThemeWare® Flyout'" section => "Style" configuration

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

• "Header" tab => "Top navigation flyout" area => "Basic configuration 'ThemeWare® Dropdown'" section => "Style" configuration

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

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.

Dropdown: Button style

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

Buttons coloured on hover

Buttons are coloured throughout

Colours of the menu items

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:

Flyout: "Shopware 5" style

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

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