Pro Mega Menu

Would you like to show off a large product catalog in a clean, organized dropdown? The Mega Menu module in Botiga Pro lets you build attractive horizontal and vertical mega menus without any code, with as many submenus as you need.

A mega menu is a dropdown that displays all its submenus in a two-dimensional layout when a visitor hovers over a menu item. With Botiga Pro, you can add labels or badges to submenu items, show images, custom HTML, and template parts, and more.

In this guide, we’ll walk you through how to create a mega menu in Botiga.

Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active. The Mega Menu is a Botiga Pro feature, so this requires Botiga Pro.

Why add a mega menu to your WooCommerce store?

Mega menus have several benefits for ecommerce stores. For example, you can:

• Display many menu items at once, which helps sites with large catalogs or lots of product categories.
• Show lower-level pages at first glance.
• Highlight a menu item, for example with a “New!” or “Sale!” badge.
• Feature your most important products.
• Increase user engagement, and more.

You can see Botiga’s mega menu in action in our Jewelry store demo.

Botiga Pro’s mega menu is also responsive. On smaller screens it tucks behind a hamburger icon, but all the options stay available when the menu is open. Here’s how the menu above looks on mobile devices.

1. Activate the Mega Menu module

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

Then open the Menus admin page, either by clicking the Customize button in the Mega Menu module or by going to Appearance » Menus in the left sidebar of your WordPress admin area.

2. Set up the structure of the mega menu

First, 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 become the columns of the mega menu. You can have as many columns as you want. Here’s an example of a mega menu layout.

Drag and drop menu items from the list of pages and other options on the left into the menu structure on the right.

Step 2

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

Step 3

Once you click the Botiga Menu Options button, a popup with styling options opens. The options change based on the level of the menu item you’re editing. Here are the top-level options.

First, enable the Mega Menu toggle, which activates the mega menu options for all submenus of the parent menu. Then select the Mega menu layout. There are two layouts, horizontal and vertical, and each has its own options. The video below shows the difference between them, and we’ll configure both in the next steps.

3a. Create a horizontal navigation menu

With the Horizontal layout, the navigation content is arranged horizontally. The Adidas website is a good example: hovering over a top-level item, such as men, women, or kids, opens a dropdown of horizontally arranged items grouped into categories like shoes, clothing, and accessories.

For the parent menu item, check the menu option.

The top level includes the following options:

1. Mega Menu: Enables the mega menu.
2. Mega Menu Layout: Selects between Horizontal and Vertical. Here, choose Horizontal.
3. Mega Menu Width: Controls the width of the mega menu, with three options: Contained, Contained with Full Width Background, and Full Width.
4. Mega Menu Columns: Controls the number of columns.
5. Mega Menu Columns Layout: Offers layout schemes based on the number of columns you add.
6. Mega Menu Dropdown Top Offset: Controls the distance between the main menu items and the dropdown.

Note: the mega menu column structure is added to the menu admin interface automatically once you click Save, so you can edit or remove the items as needed.

Styling options

You’ll find the Styling options below the general settings in the mega menu popup.

The styling options are:

1. Background Type: Controls the background type of the mega menu, either color or image.
2. Padding: Controls the padding of the mega menu wrapper.
3. Text Color: Controls the color of the mega menu items.
4. Text Color Hover: Controls the color of the hover state.
5. Headings Divider Color: Controls the color of the divider below the headings.
6. Headings Text Color: Controls the text color of the headings.
7. Headings Text Hover: Controls the color of the hover state for headings.

The video below shows the settings for the two background types, color and image.

Column options

The direct children of the top level, the Columns, display the following options.

1. Column Width: Controls the width of this column. Choose Auto or Custom. Custom adds a field to set the width in pixels.
2. Padding: Controls the padding of the column.
3. Content Type: Defines what this column renders. Default shows the submenu items. Custom HTML/Shortcode renders custom HTML or a shortcode instead, which is useful for showing an image. Custom Content Block renders a template you built with the Templates Builder. See our guide on using a custom template inside a mega menu.

Important: second-level menu items are always rendered as the columns of the mega menu.

Lower-level options

All other menu levels display the following options.

1. Turn this item into a mega menu heading: Removes the link styling and turns the item into a heading.
2. Disable link from this item: Removes the link behavior from the item.
3. Content Type: Defines what the item renders. Default shows the item and its submenu items as links. Custom HTML/Shortcode renders custom HTML or a shortcode. Custom Content Block renders a template from the Templates Builder. See our guide on using a custom template inside a mega menu.

Result

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

3b. Create a vertical navigation menu

Vertical menus offer a few advantages. They fit nicely with a sidebar, take up less space on the page, and are easier to navigate on mobile devices. The Walmart website is a good example, using a vertical menu to display many categories and products without crowding the page.

Now let’s create a vertical navigation menu with Botiga Pro.

Top-level options

For the parent menu item, check the menu option.

The top level displays the following options:

1. Mega Menu: Enables the mega menu.
2. Mega Menu Layout: Selects between Horizontal and Vertical. Here, choose Vertical.
3. Vertical Mega Menu Content Layout: Controls the vertical content layout, with up to four columns. This option does not take effect when rendering Templates Builder content.
4. Mega Menu Width: Controls the width, with three options: Contained, Contained with Full Width Background, and Full Width.
5. Mega Menu Dropdown Top Offset: Controls the distance between the main menu items and the dropdown.

Note: the mega menu column structure is added to the menu admin interface automatically once you click Save, so you can edit or remove the items as needed.

Styling options

The styling options for the vertical layout sit below the general settings.

1. Background Type: Controls the background type, color or image.
2. Padding: Controls the padding of the vertical menu wrapper.
3. Text Color: Controls the color of the menu items.
4. Text Color Hover: Controls the color of the hover state.
5. Headings Divider Color: Controls the color of the divider below the headings.
6. Headings Text Color: Controls the text color of the headings.
7. Headings Text Hover: Controls the color of the hover state for headings.

The video below shows the options for the color and image background types.

Column options

The direct children of the top level, the Columns, display the following options.

1. Column Width: Controls the width of this column. Choose Auto or Custom. Custom adds a field to set the width in pixels.
2. Padding: Controls the padding of the column.
3. Content Type: Defines what this column renders. Default shows the submenu items. Custom HTML/Shortcode renders custom HTML or a shortcode instead, which is useful for showing an image. Custom Content Block renders a template from the Templates Builder. See our guide on using a custom template inside a mega menu.

Important: second-level menu items are always rendered as the columns of the mega menu.

Lower-level options

All other menu levels display the following options.

1. Turn this item into a mega menu heading: Removes the link styling and turns the item into a heading.
2. Disable link from this item: Removes the link behavior from the item.
3. Content Type: Defines what the item renders. Default shows the item and its submenu items as links. Custom HTML/Shortcode renders custom HTML or a shortcode. Custom Content Block renders a template from the Templates Builder. See our guide on using a custom template inside a mega menu.

Result

That’s it. At this point, your vertical mega menu should look like the screenshot below.

4. Add badges and labels to your mega menu

The Mega Menu module also lets you add badges or labels to any menu item. Badges and labels are standalone features, so they work with or without the mega menu.

Edit any menu item by clicking Botiga Menu Options, then enable the Display a badge/label on this item option. New options appear that let you control the title and styling of the badge or label.

Once the badge or label is configured, save the menu and check the frontend of your website. Here’s an example with three badges.

Frequently asked questions

Below, we’ve answered some of the most common questions about creating a mega menu in Botiga.

What’s the difference between the horizontal and vertical layouts?

The horizontal layout spreads navigation content across a wide dropdown, which suits large catalogs. The vertical layout stacks content in a narrower column that fits sidebars and works well on mobile.

Which menu items become the columns?

The second-level menu items always become the columns of the mega menu. Their children appear inside each column.

Can I show an image or custom layout instead of plain links?

Yes. Set a column’s Content Type to Custom HTML/Shortcode for custom markup, or to Custom Content Block to display a template you built with the Templates Builder.

That’s it! You’ve successfully created a mega menu in Botiga, complete with styling, columns, and badges.

Next, would you like to display a designed layout inside the menu? Check out our guide on using a custom template inside a mega menu to learn more.