Flyout navigation
Last updated
Last updated
Activate the flyout navigation under Header > Main navigation > Basic configuration > Subnavigation appearance
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.
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.
Category 1 Subcategory Subcategory Subcategory Category 2 Category 3
Category 4 Subcategory Subcategory Subcategory Subcategory Subcategory Subcategory Subcategory
Category 5 Subcategory Subcategory Category 6 Subcategory Subcategory Subcategory
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.
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." You can configure the Background color (3 and 4) and the Text color (5 and 6) of the category image label. Additionally, you can configure a Border (7 and 8) and a Drop shadow (9 and 10).
The Maximum image height (11) 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 (12), 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 (13) defines how the image is positioned vertically within the container. The Horizontal image alignment (14) defines how the image is positioned horizontally within the container.
With the Aspect ratio (15), you can specify whether the tiles are displayed in portrait or landscape orientation. The Padding (16) determines the space between the tile content and the edges.
You can configure a Hover animation (17). Options include "None" and "Image zoom."
Example:
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:
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:
