> 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/additional-features/extensions/mega-menu-flyout.md). # 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. {% hint style="success" %} **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. {% endhint %} ### 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.

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

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

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

### 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 (compact)" 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). {% hint style="info" %} The styles of the dropdown navigation are still in development. We welcome your constructive [feedback](https://service.themeware.design/en/feature-request). {% endhint %} ## Dropdown: Button style You can use the button style when hovering over them or apply consistent colors to the buttons:

## 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. {% hint style="info" %} The style only applies to the flyout. The "Cards", "Sidebar" and "Teaser" layout types bring their own arrangement and use the "List" style. {% endhint %} Because the columns are filled by height, this style is less suitable if the number of subcategories varies greatly.