Mega Menu
Turn any top-level menu item into a full-width dropdown panel with multiple columns, headings, images, and custom content — without writing any code.
What is a mega menu?
A standard WordPress dropdown shows a single vertical list of sub-items. A mega menu opens a wide panel (usually the full width of the page) that can contain multiple columns, section headings, icons, images, and even arbitrary HTML. It is common on large e-commerce sites and content-heavy portals.
Enabling the mega menu on a top-level item
- Go to Menu Builder in the WordPress admin sidebar.
- Click the Mega Menu section in the left sidebar.
- You will see a list of all top-level menu items. Find the item you want to convert to a mega menu.
- Toggle on Enable mega menu for that item.
- A column editor appears below the toggle — add and configure your columns.
- Click Save Menu.
Mega menus can only be applied to top-level items (direct children of the menu root). Sub-items of a mega menu are arranged inside columns, not as nested dropdowns.
Adding and arranging columns
Once mega menu is enabled for an item, a column editor appears below the toggle. You can:
- Add a column — click Add Column. Columns stack horizontally inside the panel.
- Reorder columns — drag the column handle left or right.
- Set column width — each column has a width slider (percentage). The total should add up to 100 %.
- Delete a column — click the trash icon on the column header.
Default column layout
If you enable mega menu on an item that already has standard sub-items, the plugin automatically places those sub-items into the first column. You can then rearrange or add more columns.
Column content types
Each column can hold one or more content blocks. Click Add Content inside a column to choose from:
| Content type | Description |
|---|---|
| Menu items | A list of links from the current menu (sub-items). |
| Heading | A section label above a group of links. |
| Image | A featured image with an optional link and caption. Great for "featured product" columns. |
| Custom HTML | Arbitrary HTML content — embed a shortcode, a form, or any custom markup. |
| Spacer | Empty vertical space to separate content groups. |
Panel width options
In Menu Builder → Mega Menu, scroll to the panel appearance settings to set the default panel width:
- Full width — the panel spans the full viewport width. Content is constrained by the inner container.
- Container width — the panel matches the site's main content container (e.g. 1200 px).
- Custom width — enter a pixel value. The panel centers itself below the triggering menu item.
Hover vs click trigger
By default, mega menu panels open on mouse hover. You can switch to a click trigger in Menu Builder → Mega Menu panel appearance settings:
- Hover — panel opens when the user moves the cursor over the top-level item. A small configurable delay prevents accidental openings.
- Click — panel opens when the user clicks the item. Useful for touch-friendly designs or accessibility-first setups.
Regardless of the trigger setting, the mega menu panel is always fully keyboard-accessible. Tab moves focus through the column links, and Escape closes the panel.