Mega menu

Overview #

The Mega Menu block is designed to enhance the navigation experience by providing a comprehensive and visually appealing menu structure. It allows users to organize and display a large number of menu items in a structured format, making it easier for visitors to navigate through different sections of a website.

Key components and functionality #

Menu

The menu setting allows you to select which menu to display in the Mega Menu. This is crucial for defining the structure and content of the Mega Menu.

• Menu: Choose the menu to display. The default is main-menu.

Features bar

The features bar setting provides an option to display a bar that highlights specific features or promotions within the Mega Menu.

• Show features bar: Enable or disable the features bar. The default is true.

View all buttons

This setting allows you to display a "View All" button in each sub-menu, providing users with a quick way to access all items within a category.

• Show view all buttons: Display a button linking to the parent item in each sub-menu. The default is true.

Layout settings

These settings control the layout of the Mega Menu, including options for filling available space and centering content.

• Fill available space: Stretch the block to fill remaining space in the row.
• Show centered block: Display the block centered within the section on desktop.

Banner settings

The banner settings allow you to add a banner to the Mega Menu, which can be used for promotions or important announcements.

• Show banner: Enable or disable the banner within the navigation item.

Background settings

These settings allow you to customize the background of the banner with images or videos.

• Background image fit: Choose how the background image fits within the banner. Options include contain, cover, and default. The default is cover.
• Background image: Select an image for the banner background.
• Background video: Add a video to the banner background.

Foreground content

These settings control the content displayed over the banner, such as text and alignment.

• Horizontal alignment: Align content horizontally. Options include left, center, and right.
• Vertical alignment: Align content vertically. Options include top, center, and bottom. The default is bottom.

Button settings

These settings allow you to customize buttons within the Mega Menu, including style and layout.

• Button style: Choose the style of the button. Options include primary, secondary, extra large, plain, small, and small secondary.
• Button layout: Define the layout of the button. Options include icon left, icon right, and icon only.

Visibility settings

Control the visibility of the Mega Menu on different devices.

• Visibility: Set the visibility of the Mega Menu. Options include do not hide, hide on desktop, and hide on mobile. The default is do not hide.

Editor settings

These settings allow you to customize the title displayed in the theme editor.

• Editor title: Set the title for the Mega Menu block in the theme editor. The default is Mega menu.

Available in sections #

• Main navigation

Usage examples #

1. Creating a promotional banner: Use the banner settings to add a promotional image or video to the Mega Menu, drawing attention to special offers or new products.

2. Organizing complex menus: Utilize the menu and view all buttons settings to create a structured navigation system that allows users to easily access different sections of the website.

3. Responsive design: Adjust the visibility settings to ensure the Mega Menu is displayed appropriately on both desktop and mobile devices, enhancing the user experience across all platforms.