Create mega menu

This guide explains how to create and configure mega menus in the WoodMart theme for WordPress. Mega menus allow you to create rich, multi-column dropdown menus with custom content, images, and product grids.

WordPress menu

Before creating mega menus, you need to understand how WordPress handles navigation menus. All menus in WordPress are created and managed through the WordPress dashboard -> Appearance -> Menus.

Note

If you’re new to WordPress menus, review the WordPress menu user guide for detailed instructions on creating, editing, and managing menus

The WoodMart theme offers flexible menu display options, allowing you to create multiple menus and place them anywhere on your site

Main menu – displayed in the header
Mobile menu – displayed on mobile devices

For detailed information about menu placement options, see Adding a menu to the site.

The same menu can be assigned to both locations, or you can create separate menus for each. WoodMart also allows you to display menus in custom locations throughout your site.

Mega menu

WoodMart extends WordPress default menu functionality with mega menu blocks. These are special dropdown menus that can contain rich content like:

Multi-column layouts
Product grids and carousels
Images and banners
Custom text and HTML content
WooCommerce product categories
Contact information and social links

Mega menus are built using either WP Bakery Page Builder, Elementor or Gutenberg templates, giving you complete design flexibility.

Creating your first mega menu

Before adding mega menu functionality to a menu item, you need to create the content that will appear in the dropdown.

Step 1. Create an HTML block

Navigate to Dashboard -> HTML blocks -> Add new.
Create your mega menu content using either WP Bakery Page Builder, Elementor or Gutenberg.
Save your HTML block with a descriptive name.

Important

You must create and save your HTML block before it can be selected in the menu options. The HTML block dropdown only appears after the menu has been saved and the page reloaded

Step 2. Configure your menu item

Go to Appearance -> Menus
Select your menu or create a new one
Add or select the menu item you want to convert to a mega menu
Click on the menu item to expand its options
In the “Design” dropdown, select either the “Full-width” or “Set-size”

Note

The HTML block dropdown only appears after selecting the “Full-width”, “Full-height”, “Set-size”, or “Aside” in the “Design” option

Step 3. Select your HTML block

Find the HTML Block for the dropdown option
Select the HTML block you created in Step 1
Configure additional options as needed
Save your menu

Menu custom fields

The “Design” field determines how your mega menu will display:

Default – the drop-down menu will have the default width and no mega block option will appear.
Full-width – block will have the full width of the menu container aligned in the center and the option to choose HTML block as a menu mega block would appear.
Full-height – block will have the full height of the menu container aligned in the left and the option to choose HTML block as a menu mega block would appear.
Set-size – allows setting the custom size of the block and the option to choose HTML block as a menu mega block would appear.
Aside – arrange the subitems aside, showing their dropdowns on hover as tabs. Check on our demo here

HTML Block for the dropdown – this drop-down appears when the “Full-width“ or “Set Size” is chosen in the “Design” drop-down and presents all the existing HTML blocks for selection as a mega menu block.

Performance optimization

Load HTML dropdown with AJAX – option to load HTML blocks with AJAX to optimize the performance

Note

Load HTML dropdown with AJAX is recommended for content-heavy mega menus to optimize performance

Visual customization

Dropdown text color scheme – dark or white. A dark color scheme ensures dark text and a light background. A light color scheme ensures light text and a dark background for the mega menu block.

Open on mouse event – allows to set a hover or click event on the menu item, in result, the Mega menu block would appear on hover or click.

Menu item enhancements

Label text – option to add a custom tooltip to the menu item

Image – You can upload an icon to be displayed right before the menu item text. SVG or PNG is recommended here.

Use image as – You can display the uploaded image as an icon next to the menu item text or as a background for the dropdown.

Label color – the option to set the color of the tooltip in the menu item.

Icon name – this field supports icons only from the provided source from FontAwesome source – the field requires inserting the keyword from the FontAwesome icon. For example, the ID home icon code looks like this:

<i class="fas fa-home"></i>

It is necessary to extract the part that identifies the icon, which is fas fa-home, and insert it into the field.

Advanced features

Page anchor -enable using a one-page navigation menu. If enabled, it is necessary to set the link for this item to be like this: http://your_site.com/home_page/#anchor_id , where anchor_id will be the ID of the ROW on your home page.

CSS Classes (optional) – allow to insert a class and assign custom CSS, besides inserting the woodmart-open-newsletter class would assign a menu item to the theme Promo Popup.

Create a Mega Menu with Gutenberg

Learn how to build and customize a powerful mega menu in the WoodMart theme using Gutenberg.