# Flyout navigation
{% hint style="info" %}
Activate the flyout navigation under\
\&#xNAN;*Header >* [*Main navigation*](#main-navigation-kategorien) *>* [*Basic configuration*](#grundeinstellungen-1) *>* Subnavigation appearance
{% endhint %}
### Colors
The **background color (1)** of the flyout navigation can also be a partially transparent color. Via the colorpicker the visibility can be deposited in the alpha channel.
**Text (2)** and **text:hover (3)** colors do not have to be different. When moving the mouse over, the individual entries move a few pixels to the side.
### Basic configuration
The flyout navigation is the mega menu in Shopware 6, which displays the subcategories when hovering over them. With **full width (1)** you set whether the menu should use the full width of the theme. **Header line (2)** the header containg the text **"To category XY >"** can be hidden to create a distraction-free design. Various selectable **animations (5)** round off the concept.
The category image can be disabled by the **flyout teaser (3)** configuration. Often you want the category image to be the category image in the header of the category, but not visible in the flyout navigation.
**Extern-link icon (4)** displays the familiar "External Link" icon for categories of type "Link" when it is checked by ["Open in new tab"](https://docs.shopware.com/en/shopware-6-en/catalogs/categories?category=shopware-6-en/catalogs#general). This way your visitors will know exactly what happens when they click on such a link, see example 2.
**Grouping-border left (6)** helps to highlight a delimitation of columns for many subcategories, see example 3.
**Navigation levels (7)** specify how many levels of the category tree should be displayed. Counted is from the main category level.
{% hint style="warning" %}
**Caution:** In the sales channel settings, the number of main navigation levels must be at least as high as specified here.
This setting fixes the Shopware bugs NEXT-9461 and NEXT-13203.
{% endhint %}
**Cols (8)** specifies how many columns the menu items should be arranged in the flyout menu.
Using **dynamic column filling (9)**, the content is filled top-to-bottom into vertical columns, not left-to-right into rows. The browser automatically divides the available space into multiple columns. It then tries to balance the columns so their heights are as equal as possible. Depending on the height of individual items, the browser may shift elements between columns. This means that several main categories can be accommodated in one column.
{% tabs %}
{% tab title="Dynamic column filling" %}
|
|
| {% endtab %} | | |
| {% endtabs %} | | |
If you activate the **Content scrollable (10)** option, you define the limit of the flyout and the display of the scroll bars with the **maximum height (11)**. This allows you to ensure that your customers can easily reach all navigation points, even with more extensive navigation **- even if the header is sticky.**
### Category images of subcategories
**Display category images of subcategories (1)** activate the category images globally for subcategories of your first main navigation level in the flyout navigation. The assigned category image will be used as the image.
In the custom fields of the category, you can adjust this setting for each category. Additionally, you can upload an alternative category image if you do not want to display the actual category image.
You can set the **Appearance (2)** to "Text below image" or "Text next to image" and determine the **space between element (3)**.\
\
You can configure the **Background color (4 and 5)** and the **Text color (6 and 7)** of the category image label.\
\
Additionally, you can configure a **Border (8 and 9)** and a **Drop shadow (10 and 11)**.
The **Maximum image height (12)** determines the maximum height of the tiles, ensuring that the tiles are displayed in a equal size even with different image formats.
With the **Image display mode (13)**, you decide how the image should be presented:
* **Original**: The image is displayed in its original size.
* **Cropped**: The element is completely filled with the image. Smaller images will be stretched, potentially causing them to appear blurry. For images with an unsuitable aspect ratio, the longer side will be cropped, so some parts of the image will not be displayed.
* **Fixed Height**: The image is stretched and adjusted to the size of the container without being cropped.
The **Vertical image alignment (14)** defines how the image is positioned vertically within the container.\
\
The **Horizontal image alignment (15)** defines how the image is positioned horizontally within the container.
With the **Aspect ratio (16)**, you can specify whether the tiles are displayed in portrait or landscape orientation.\
\
The **Padding (17)** determines the space between the tile content and the edges.
You can configure a **Hover animation (18)**. Options include "None" and "Image zoom."
Example:
### Items
You can format the individual entries of the flyout navigation.
Example 1:
{% hint style="info" %}
The background color can also be transparent. With the rgba function a opacoty can be specified in addition to the color.
`rgba($sw-color-brand-primary, 90%)`
{% endhint %}
Example 2:
Example 3:
### Category icons
> from theme version 4.7.0
Via the **custom fields** under Catalogues > Categories > \[Select category] in the tab "Additional" you will find a media field **Category Icon** for configuring the icon.
You can use the checkbox **Icon (1)** to activate the display of icons in the main navigation and set the **Size (2)** of the icons for the respective menu.
Example:
