← All widgetsWidget 115 · emcp_custom_115

Advanced Menu

Elementor widget5 layouts13 content options49 style options7 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: menu, navigation, nav, dropdown, hamburger, header, dynamic.

Setup guide

  1. Open a page in Elementor, search the panel for Advanced Menu and drag it into a container.
  2. Content › Layout: Layout, Alignment, Submenu Opens On, Submenu Animation, Show Dropdown Arrows, Collapse to Hamburger Below, Mobile Menu Style, Toggle Label and 1 more.
  3. Content › Query: Menu.
  4. Content › Mega Menu: Mega Panels, Replace Existing Submenu, mega_alert.
  5. Pick a Layout: Horizontal, Vertical (sidebar), Horizontal pills, Horizontal underline, Boxed bar. Each one is shown below.
  6. Style tab sections: Menu Items, Dropdown, Mega Panel, Mobile Toggle & Panel. Colours, typography and spacing set here are scoped to this widget instance.
  7. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Menu is a live query (source: menu). A "Menu" panel with filters, ordering and count is generated for it; results come from this site's data on every page load.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

Horizontal

Layout = horizontal

Layout

Vertical (sidebar)

Layout = vertical

Layout

Horizontal pills

Layout = pills

Layout

Horizontal underline

Layout = underline

Layout

Boxed bar

Layout = boxed

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Layout

OptionTypeChoices / rangeDefaultNotes
Layout
layout		DropdownHorizontal, Vertical (sidebar), Horizontal pills, Horizontal underline, Boxed barhorizontal
Alignment
align		Button groupLeft, Center, Right, Stretchflex-startResponsive
Submenu Opens On
dropdown_trigger		DropdownHover, Clickhover
Submenu Animation
dropdown_anim		DropdownFade, Fade up, Scale, Nonefade-up
Show Dropdown Arrows
show_arrow		Toggleon / offyes
Collapse to Hamburger Below
breakpoint		DropdownNever, Mobile (767px), Tablet (1024px), Laptop (1200px)1024
Mobile Menu Style
mobile_style		DropdownDropdown below toggle, Off-canvas panel, Full-screen overlaydropdown
Toggle Label
toggle_label		TextMenu
No Menu Text
empty_text		TextAssign a menu in the Query panel.

Query

OptionTypeChoices / rangeDefaultNotes
Menu
items		QuerySource: menu

Mega Menu

OptionTypeChoices / rangeDefaultNotes
Mega Panels
mega_panels		Repeater
↳ Menu Item Title
item		TextThe saved template opens as a panel under this top-level menu item.
↳ Panel Template
template		ShortcodeProvider picker
↳ Panel Width
width		DropdownFull bar width, Wide, centred under the bar, Under the itemfull
Replace Existing Submenu
mega_replace		Toggleon / offyesWhen the item already has child links, hide them and show the panel instead.
mega_alert
mega_alert		Alert

Style tab

Menu Items

OptionTypeChoices / rangeDefaultNotes
Typography
item_typo		Typography
Color
item_color		Color#101828
Hover Color
item_color_h		Color#6a11cb
Active Color
item_color_a		Color#6a11cb
Background
item_bg		Color
Hover Background
item_bg_h		Color
Active Background
item_bg_a		Color
Accent (underline / pill)
accent		Color#6a11cb
Item Padding
item_pad		Dimensions
Gap Between Items
item_gap		Slidermin 0, max 60, px6Responsive
Item Radius
item_radius		Slidermin 0, max 60, px8
Bar Background
bar_bg		Background
Bar Padding
bar_pad		Dimensions
Bar Border
bar_border		Border
Bar Radius
bar_radius		Slidermin 0, max 60, px0
Bar Shadow
bar_shadow		Box shadow

Dropdown

OptionTypeChoices / rangeDefaultNotes
Typography
dd_typo		Typography
Color
dd_color		Color#344054
Hover Color
dd_color_h		Color#6a11cb
Background
dd_bg		Color#ffffff
Item Hover Background
dd_item_bg_h		Color#f9f5ff
Min Width
dd_w		Slidermin 120, max 500, px220
Padding
dd_pad		Dimensions
Item Padding
dd_item_pad		Dimensions
Border
dd_border		Border
Radius
dd_radius		Slidermin 0, max 40, px12
Shadow
dd_shadow		Box shadow
Item Divider
dd_divider		Color
Arrow Color
arrow_color		Color

Mega Panel

OptionTypeChoices / rangeDefaultNotes
Background
mega_bg		Background
Padding
mega_pad		Dimensions
Border
mega_border		Border
Radius
mega_radius		Slidermin 0, max 60, px16
Shadow
mega_shadow		Box shadow
Wide Panel Max Width
mega_wide_w		Slidermin 400, max 1600, px960
Under-item Panel Width
mega_auto_w		Slidermin 240, max 1200, px560
Top Offset
mega_top		Slidermin 0, max 60, px8
Animation
mega_anim		DropdownFade up, Fade, Scale, Nonefade-up

Mobile Toggle & Panel

OptionTypeChoices / rangeDefaultNotes
Toggle Color
tg_color		Color#101828
Toggle Background
tg_bg		Color
Toggle Border
tg_border		Border
Toggle Radius
tg_radius		Slidermin 0, max 40, px8
Toggle Icon Size
tg_size		Slidermin 14, max 40, px22
Panel Background
mp_bg		Color#ffffff
Panel Link Color
mp_color		Color#101828
Panel Divider
mp_divider		Color#eaecf0
Panel Padding
mp_pad		Dimensions
Off-canvas Width
mp_w		Slidermin 200, max 600, px320
Overlay Color
mp_overlay		Colorrgba(16,24,40,.55)

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_115" and a settings object using the keys above. Run get-custom-widget with id 115 for the full JSON spec.