[PRO] Mega Menu - aThemes Knowledge Base

The Mega Menu feature is bundled with Botiga Pro as a module and allows you to create attractive mega menus without any code.

A mega menu is a type of dropdown menu that displays all the submenus in a two-dimensional layout whenever the user hovers the cursor over a menu item.

With Botiga Pro, you can create both horizontal and vertical mega menus with as many submenus as you want. You can also add labels or badges to the submenu items, show images, custom HTML, and template parts in the mega menu, and more.

Why Add a Mega Menu to Your WooCommerce Store?
1. Activate the Mega Menu Module
2. Set Up the Structure of the Mega Menu
3a. Create a Horizontal Navigation Menu
3b. Create a Vertical Navigation Menu
4. Add Badges/Labels to Your Mega Menu

Why Add a Mega Menu to Your WooCommerce Store?

Mega menus have multiple benefits for eCommerce stores.

For example, you can:

display a lot of menu items at once, which is especially good for sites with larger product catalogs or with a lot of product categories
show lower-level pages at first glance
highlight a menu item, e.g. you can add a ‘New!’ or ‘Sale!’ badge
feature your most important products
increase user engagement
…and more

You can check out Botiga’s mega menu feature in action in our Jewelry store demo:

Botiga Pro’s mega menu is also responsive. On smaller screens, it’s hidden behind a stylish hamburger icon, but all the options are available when the menu is open.

Here’s what the mega menu above looks like on mobile devices:

1. Activate the Mega Menu Module

Go to Botiga > Theme Dashboard, look for the Mega Menu module in the Do more with Botiga Pro section, and click the Activate button.

Open the Menus admin page by either clicking the Customize button in the Mega Menu module or selecting the Appearance > Menus option in the left sidebar of your WordPress admin area:

2. Set Up the Structure of the Mega Menu

First, you need to create the menu hierarchy.

Step 1

On the Menus admin page, either select an existing menu to edit or click the create a new menu link:

The direct children of the parent menu item will be rendered as the columns of the mega menu. You can have as many columns as you wish.

For instance, here’s an example of a mega menu layout:

Drag and drop the menu items from the list of pages and other options available on the left side to the menu items, which can be seen on the right side.

Step 2

Choose the parent menu item where you want to add the mega menu, expand it, and click the Botiga Menu Options button:

Step 3

Once you have clicked the Botiga Menu Options button, a popup with styling options will open.

The popup options change according to the respective level of the menu item you are editing — for example, here are the top-level options:

First, enable the Mega Menu toggle which will activate the mega menu options for all submenus of the parent menu.

Then, select the Mega menu layout. You’ll find two layouts to choose from: a horizontal and a vertical layout; each has its own distinct options. In the video below, you can see the differences between the two (we’ll see how to configure both in the next steps):

3a. Create a Horizontal Navigation Menu

With the Horizontal layout, the navigational content will be arranged horizontally.

The Adidas Official Website has a great example of a standard horizontal navigation menu. Hovering over top-level navigation bar items (men, women, kids, etc.) triggers a dropdown with horizontally-arranged menu items. These items are further grouped into categories for better getting around, such as shoes, clothing, accessories, and so on:

Horizontal navigation menu example on the Adidas website

For the parent menu item, check the menu option:

The top level includes the following options:

Mega Menu: Enables the mega menu.
Mega Menu Layout: Selects the layout between Horizontal and Vertical. In this case, we are selecting Horizontal, as we will be creating a horizontal navigation menu.
Mega Menu Width: Controls the width of the mega menu. You will find three options: Contained, Contained with Full Width Background, and Full Width.
Mega Menu Columns: Controls the number of columns.
Mega Menu Columns Layout: Based on the number of columns you add, you will find some layout schemes.
Mega Menu Dropdown Top Offset: Controls the distance between the main menu items and the mega menu dropdown.

💡 Note: The mega menu columns structure will be automatically added to the menu admin interface once you click the Save button. So you can edit or remove the items as per your needs.

Styling Options

You can find the Styling options below the general settings in the mega menu popup:

You get access to the following styling options:

Background Type: Controls the type of the mega menu background (color or image).
Padding: Controls the padding of the mega menu wrapper.
Text Color: Controls the color of the mega menu items.
Text Color Hover: An option to control the color of the hover state.
Headings Divider Color: Controls the color of the divider below the headings.
Headings Text Color: Controls the text color of the headings in the mega menu.
Headings Text Hover: An option to control the color of the hover state.

The video below shows the different settings belonging to the two background types (color vs image):

Column Options

The direct children of the top level (Columns) will display the following options:

Review and configure them one by one:

Column Width: Controls the width of this mega menu column. Select between Auto and Custom. The Custom option will show an additional option that lets you control the column width value in pixels.
Padding: Controls the padding of the column.
Content Type: Defines the type of content this mega menu item should render:
- Default: This content type renders the submenu items (if any).
- Custom HTML/Shortcode: This content type renders any custom HTML or shortcode instead of the submenu items. It can be useful when you want to display an image inside the column.
- Custom Content Block: This content type renders a template you created with the Templates Builder module. Learn more about it here.

💡 Important: Keep in mind that second-level menu items will always be rendered as the columns of the mega menu.

Lower-Level Options

All the other menu levels will display the following options:

Here’s what they refer to:

Turn this item into a mega menu heading: Removes the link styling from the respective item and turns it into a heading.
Disable link from this item: Removes the link behavior from the item.
Content Type: Defines the type of content the item will render:
- Default: This content type renders the item and its submenu items (if any) as HTML anchor tags (a.k.a. links).
- Custom HTML/Shortcode: This content type renders any custom HTML or shortcode.
- Custom Content Block: This content type renders a template you created with the Templates Builder module. Learn more about it here.

💡 Result

That’s it! At this point, your horizontal mega menu should look like the screenshot below:

3b. Create a Vertical Navigation Menu

Using vertical menus offers several advantages. They fit better with your website’s sidebar, take up less space on the page, and are easier to navigate on mobile devices.

A good example can be seen on the Walmart website, which uses a vertical navigation menu to display many product categories and products without overcrowding the space:

Vertical navigation menu example on the Walmart website

Now, let’s see how to create a vertical navigation menu with Botiga Pro.

Top-Level Options

For the parent menu item, check the menu option:

The top level will display the following options:

Mega Menu: Enables the mega menu.
Mega Menu Layout: Selects the layout between Horizontal and Vertical. In this case, we are selecting Vertical, as we will be creating a vertical navigation menu.
Vertical Mega Menu Content Layout: Controls the vertical mega menu content layout. You can add up to four columns. Note that this option doesn’t take effect when rendering templates builder content.
Mega Menu Width: Controls the width of the mega menu. You will find three options: Contained, Contained with Full Width Background, and Full Width.
Mega Menu Dropdown Top Offset: Controls the distance between the main menu items and the mega menu dropdown.

💡 Note: The mega menu columns structure will be automatically added to the menu admin interface once you click on the Save button. So you can edit or remove the items as per your needs.