Offcanvas Panel

← All widgetsWidget 108 · emcp_custom_108

Elementor widget4 layouts14 content options36 style options5 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: offcanvas, drawer, sidebar, slide, panel, menu, hamburger.

Setup guide

Open a page in Elementor, search the panel for Offcanvas Panel and drag it into a container.
Content › Trigger: Trigger Style, Button Text, Icon, Trigger Alignment.
Content › Panel Content: Panel Title, Logo (optional), Content, Quick Links, Footer Text, Slide From, Effect, Close on Overlay Click and 2 more.
Pick a Effect: Slide over, Push page, Reveal (page slides away), Scale page back. Each one is shown below.
Style tab sections: Trigger, Panel, Panel Text & Links. Colours, typography and spacing set here are scoped to this widget instance.
Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.

Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.

Layout

Slide over

Effect = slide

Layout

Push page

Effect = push

Layout

Reveal (page slides away)

Effect = reveal

Layout

Scale page back

Effect = scale

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

Trigger

Option	Type	Choices / range	Default	Notes
Trigger Style `trigger_style`	Dropdown	Button with text, Icon only, Animated hamburger, Floating edge tab	button
Button Text `btn_text`	Text		Open panel
Icon `btn_icon`	Icon
Trigger Alignment `align`	Button group	Left, Center, Right	left	Responsive

Panel Content

Option	Type	Choices / range	Default
Panel Title `title`	Text		Menu
Logo (optional) `logo`	Image
Content `content`	Rich text		Add any content: navigation links, co...
Quick Links `links`	Repeater		4 items
↳ Label `label`	Text		Home
↳ URL `url`	Link
↳ Icon `icon`	Icon
Footer Text `footer_text`	Textarea
Slide From `side`	Dropdown	Left, Right, Top, Bottom	left
Effect `effect`	Dropdown	Slide over, Push page, Reveal (page slides away), Scale page back	slide
Close on Overlay Click `close_overlay`	Toggle	on / off	yes
Close on Esc `close_esc`	Toggle	on / off	yes
Close When a Link Is Clicked `close_links`	Toggle	on / off	yes

Style tab

Trigger

Option	Type	Choices / range	Default
Typography `t_typo`	Typography
Text / Icon Color `t_color`	Color		#ffffff
Background `t_bg`	Color		#101828
Hover Text / Icon `t_color_h`	Color
Hover Background `t_bg_h`	Color
Icon Size `t_icon_size`	Slider	min 10, max 60, px	18
Padding `t_pad`	Dimensions
Radius `t_radius`	Slider	min 0, max 60, px	10
Border `t_border`	Border
Shadow `t_shadow`	Box shadow
Floating Tab Vertical Position `float_pos`	Slider	min 0, max 100, %	50

Panel

Option	Type	Choices / range	Default	Notes
Panel Width `p_w`	Slider	min 200, max 900, px/vw/%	360	Responsive
Panel Height (top / bottom) `p_h`	Slider	min 20, max 100, vh	60
Background `p_bg`	Background
Padding `p_pad`	Dimensions
Shadow `p_shadow`	Box shadow
Overlay Color `overlay`	Color		rgba(16,24,40,.55)
Animation Duration `duration`	Slider	min 0.1, max 2, s	0.4
Close Icon Color `x_color`	Color		#667085
Close Background `x_bg`	Color
Close Hover Color `x_color_h`	Color
Close Size `x_size`	Slider	min 20, max 64, px	36

Panel Text & Links

Option	Type	Choices / range	Default
Title Typography `title_typo`	Typography
Title Color `title_color`	Color		#101828
Logo Height `logo_h`	Slider	min 16, max 120, px	32
Content Typography `c_typo`	Typography
Content Color `c_color`	Color		#475467
Link Typography `l_typo`	Typography
Link Color `l_color`	Color		#101828
Link Hover Color `l_color_h`	Color		#6a11cb
Link Hover Background `l_bg_h`	Color		#f9f5ff
Link Padding `l_pad`	Dimensions
Link Divider Color `l_divider`	Color		#eaecf0
Link Radius `l_radius`	Slider	min 0, max 30, px	8
Footer Typography `f_typo`	Typography
Footer Color `f_color`	Color		#98a2b3

Add it with the MCP tools

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