Navigation · Elementor
Mega Menu widget for Elementor
A menu widget that can hold Elementor content in dropdowns — columns, cards, CTAs — not only nested links.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A menu widget that can hold Elementor content in dropdowns — columns, cards, CTAs — not only nested links.
Class Mega_Menu Elementor Mega Menu widget for King Addons plugin. Provides a flexible, customizable mega menu for Elementor, supporting WordPress menus and (in Pro) custom menu items, advanced dropdowns, and mobile layouts.
render() writes HTML data attributes: data-center-logo, data-dropdown-animation, data-horizontal-align, data-logo-position-desktop, data-logo-position-mobile, data-logo-position-tablet, data-split-at, data-vertical-align.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-center-logo, data-dropdown-animation, data-logo-position-desktop, data-logo-position-mobile, data-logo-position-tablet, data-split-at.
Headers keep aria-expanded in sync when panels open and close.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Mega Menu”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Menu Source”, “Select Menu”, “Show Logo”, “Logo Position (Desktop)”. Style and Content tabs are listed on this page.
When to use it
- A store header with shop-by-category panels.
- A SaaS header with feature groups.
- A multi-brand navigation.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Menu Source | The chosen value is read in render() and applied on the front end. Options: WordPress Menu; Custom Elementor Menu. |
| General — Select Menu | The chosen value is read in render() and applied on the front end. |
| General — Show Logo | When this switch is on, render() outputs the featured image. |
| General — Logo Position (Desktop) | The chosen value is read in render() and applied on the front end. Options: Left; Center Between; Right. |
| General — Logo Position (Tablet) | The chosen value is read in render() and applied on the front end. Options: Left; Center; Right. |
| General — Logo Position (Mobile) | The chosen value is read in render() and applied on the front end. Options: Left; Center; Right. |
| General — Custom Logo | Media Library attachment(s); render() uses the URL/ID as the image source. |
| General — Split Menu After Item | Logo will be placed after this menu item number (e.g., 2 = after 2nd menu item). |
| General — Menu Items Vertical Alignment | Writes CSS `align-items` onto the widget’s front-end markup. Options: Top; Center; Bottom. |
| General — Logo Size | Writes CSS (max-width, width, height) onto the widget’s front-end markup. (min 10, max 500). |
| General — Menu Layout | The chosen value is read in render() and applied on the front end. Options: Horizontal; Vertical. |
| General — Menu Alignment | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Left; Center; Right; Justify. |
| General — Menu Alignment (Vertical Alignment) | Writes CSS `align-items` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Dropdown Settings — Animation Duration (ms) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 300). |
| Menu Style — Background (Desktop) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Menu Style — Background (Tablet) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Menu Style — Background (Mobile) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Menu Style — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-mega-menu`. |
| Menu Style — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Menu Style — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Menu Style — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-mega-menu`. |
| Menu Items — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-menu-item > a, {{WRAPPER}} .king-addons-menu-items > li > a`. |
| Menu Items — Items Spacing | Writes CSS (margin-right, margin-bottom) onto the widget’s front-end markup. (min 0, max 100). |
| Menu Items — Item Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Menu Items (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Menu Items (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Menu Items (Normal) — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-menu-item > a, {{WRAPPER}} .king-addons-menu-items > li > a`. |
| Menu Items (Normal) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Menu Items (Hover) — Text Color | Writes CSS (a, color, king-addons-menu-item, li) onto the widget’s front-end markup. |
| Menu Items (Hover) — Background Color | Writes CSS (a, background-color, king-addons-menu-item, li) onto the widget’s front-end markup. |
| Menu Items (Hover) — Border Color | Writes CSS (a, border-color, king-addons-menu-item, li) onto the widget’s front-end markup. |
| Menu Items (Active) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Menu Items (Active) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Menu Items (Active) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Dropdown Style — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Dropdown Style — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-menu-items ul.sub-menu li a, {{WRAPPER}} .king-addons-submenu …`. |
| Dropdown Style — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Dropdown Style — Text Hover Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Dropdown Style — Item Hover Background | Writes CSS (a, background-color) onto the widget’s front-end markup. |
| Dropdown Style — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-menu-items ul.sub-menu, {{WRAPPER}} .king-addons-submenu`. |
| Dropdown Style — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Dropdown Style — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Dropdown Style — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-menu-items ul.sub-menu, {{WRAPPER}} .king-addons-submenu`. |
| Mobile Menu — Toggle Button Color | Writes CSS `color` onto the widget’s front-end markup. |
| Mobile Menu — Toggle Button Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Mobile Menu — Toggle Button Hover Color | Writes CSS (king-addons-mobile-menu-toggle, color) onto the widget’s front-end markup. |
| Mobile Menu — Toggle Button Hover Background | Writes CSS (king-addons-mobile-menu-toggle, background-color) onto the widget’s front-end markup. |
| Mobile Menu — Toggle Button Active Color | Writes CSS `color` onto the widget’s front-end markup. |
| Mobile Menu — Toggle Button Active Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Mobile Menu — Menu Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Mobile Menu — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Mobile Menu — Text Hover Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Mobile Menu — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-mobile-menu a`. |
| Mobile Menu — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-mobile-menu`. |
| Mobile Menu — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-mobile-menu`. |
| Logo Style — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Logo Style — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Logo Style — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-mega-menu-logo`. |
| Logo Style — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Mega Menu options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
Does this replace the WordPress menu?
You still create a WP menu (or build items in the widget). Mega Menu is the Elementor widget that renders it, including Elementor content in dropdowns.
How do I add Mega Menu in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Mega Menu”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related navigation widgets
Off-Canvas Content
A panel that slides in from the edge: mobile menu, filters, or extra content you do not want on the canvas.
Breadcrumbs
A breadcrumb trail for the current page, with separators and styling in Elementor.
One Page Navigation
Anchor navigation for a one-page layout. Links scroll to sections; styling is CSS-only.
Search (AJAX, live results, filters)
AJAX search with live results and optional filters. This is a search field, not a posts grid.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Mega Menu after you activate it.