Mega menu

Learn to elevate your store navigation with a seamless and user-friendly mega menu created with FoxKit

A mega menu is an expanded and visually appealing menu that displays multiple navigation options and subcategories in a single dropdown panel.

A well-designed mega menu simplifies the browsing process for your customers.

It provides a clear overview of your store's product categories and subcategories, allowing users to quickly find what they want.
It reduces the number of clicks required to navigate through your site, enhancing user satisfaction and encouraging exploration of your product offerings.

Steps:

Give your menu a name and select the layout for it.

You can choose 1 of the 2 layout options for your mega menu. It can be:

Horizontal menu: In a horizontal mega menu, the parent menu items stand at the top; and sub-items, or child menu items, spread out underneath them.

Vertical menu: In a vertical mega menu, the parent menu items stand on the left side; and sub-items, or child menu items, branch out from them to the right.

Each submenu item can be chosen as:

Pure text link: Link the item to a certain collection, product, landing page, etc.
Text link with image banner: A menu banner can attract customers' attention and communicate your messages more effectively.

Title: Insert your menu item label;
Link: paste the page URL or select a page from your Shopify store that you want to link the menu item with, or simply leave it blank.

Include the full URL of that page, including the URL's HTTPS protocol.

Select how the submenu is opened: by hovering/clicking;
Select the Dropdown container width: Full width/ Auto width;
Enable to show content in the container if needed;
Set the number of submenu columns: 1-6 columns or based on the number of submenu items being added to the menu item.

You can set the Icon and Badge for each menu item to attract customers or visitors' attention.

The Icon will be positioned beside the menu item label.

Select your preferred icon in the Select icon field.

Then, adjust the Icon size to fit the menu item (10px-50px) and change the Icon color.

The Badge will be positioned next to the menu item label.

Enable/Disable the Badge by toggling the Show badge option.

Insert the content you want in the Badge label to show on the menu item.

Then, you can also adjust the suitable Badge background color and Badge text color to highlight it.

Select in what view that menu item and submenu items are displayed.

To change the styling of the mega menu, choose Appearance.

Some details of the mega menu that you can change are:

Menu layout
- Horizontal
- Vertical
Menu width
- Fill container
- Fixed width
Menu bar background: Change color
Menu text color
Menu text hover color
Space between items
Submenu design
- Background: Change color
- Text: Change color
- Text hover: Change color