Flyout navigation

Activate the flyout navigation under Header > Main navigation > Basic configuration > Subnavigation appearance

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

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.

Cols (8) specifies how many columns the menu items should be arranged in the flyout menu.

Using dynamic column filling (9), the columns are built based on their available space. This means that several main categories can be accommodated in one column.

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.

Items

You can format the individual entries of the flyout navigation.

Example 1:

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%)

Example 2:

Example 3:

Last updated 14 days ago