Mega Menu
Help visitors reach every section from one rich menu.
WordPress menus with mega panels from Elementor templates or sub-item columns, icons and badges per item, dropdowns, a vertical layout and mobile drawers.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Mega Menu. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Menu
| Setting | What you can set |
|---|---|
| Menu | — Choose a menu — |
| Layout | Horizontal or Vertical — panels open to the side |
| Alignment | Left, Center, Right or Justify |
| Levels | 0 = all levels. |
| Hover Effect | Colour only, Underline, Overline, Pill background or Dot below |
Dropdowns & Mega Panels
| Setting | What you can set |
|---|---|
| Open On | Hover (and click / keyboard) or Click only |
| Close Delay (ms) | Number |
| Animation | None, Fade, Fade and rise, Drop down or Zoom |
| Sub-menu Indicator | Icon picker |
| “Container” Panels Match | The section around the menu, The menu bar itself or The site’s content width · Used by items whose panel width is “Container”. |
| Content Width (px) | Number |
| Gap Below the Bar (px) | Number |
| Dim the Page Behind Mega Panels | On / off |
Mobile Menu
| Setting | What you can set |
|---|---|
| Switch to the Mobile Menu Below | Tablet (1024px), Mobile (767px), Custom or Never |
| Custom Breakpoint (px) | Number |
| Mobile Menu | Dropdown below the bar, Drawer from the left, Drawer from the right or Full screen |
| Mega Panels on Mobile | Show the template or Show the item’s sub-items instead |
| Toggle Text | Text |
| Logo in the Drawer | Image |
| Button at the Bottom | Text |
| Button Link | Link |
Style tab: design controls for Menu Bar, Top-level Items, Dropdowns, Mega Panels, Icons & Badges or Mobile Menu — colours, typography, spacing, borders and hover states.
Tips
- Start with the Layout choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
Related
- Also available for Gutenberg (Mega Menu).
- Works well with: Advanced Search, Breadcrumbs, Nav Menu.