One Page Navigation

← All widgetsWidget 109 · emcp_custom_109

Elementor widget6 layouts9 content options30 style options4 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: one page, navigation, dots, scroll, sections, anchor, scrollspy.

Setup guide

Open a page in Elementor, search the panel for One Page Navigation and drag it into a container.
Content › Sections: note, Sections, Dot Style, Position, Scroll Offset (px, e.g. sticky header height), Smooth Scroll, Hide on Mobile, Show Prev / Next Arrows and 1 more.
Pick a Dot Style: Dots, Dots with tooltip on hover, Dots with labels always shown, Icons, Numbered, Lines. Each one is shown below.
Style tab sections: Navigation Bar, Dots, Tooltip / Label. 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.

This widget is fixed to the viewport (a corner button, a bar or a toast). On this page each demo is pinned inside its grey stage box so you can see it in place; on a real page it floats over the content. Scroll-driven options react to the scrolling of this page.

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

Layout

Dots

Dot Style = dots

One Page Navigation (fixed dots render on the front end)

Layout

Dots with tooltip on hover

Dot Style = dots-tooltip

Layout

Dots with labels always shown

Dot Style = labels

One Page Navigation (fixed dots render on the front end)

Layout

Icons

Dot Style = icons

One Page Navigation (fixed dots render on the front end)

Layout

Numbered

Dot Style = numbers

One Page Navigation (fixed dots render on the front end)

Layout

Lines

Dot Style = lines

One Page Navigation (fixed dots render on the front end)

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

Sections

Option	Type	Choices / range	Default
note `note`	Alert
Sections `items`	Repeater		4 items
↳ Section CSS ID `section_id`	Text		hero
↳ Tooltip Label `label`	Text		Home
↳ Icon (optional) `icon`	Icon
Dot Style `style`	Dropdown	Dots, Dots with tooltip on hover, Dots with labels always shown, Icons, Numbered, Lines	dots
Position `position`	Dropdown	Right, Left	right
Scroll Offset (px, e.g. sticky header height) `offset`	Number	min 0, max 400	0
Smooth Scroll `smooth`	Toggle	on / off	yes
Hide on Mobile `hide_mobile`	Toggle	on / off	yes
Show Prev / Next Arrows `show_arrows`	Toggle	on / off
Keyboard (Page Up / Down) Navigation `keyboard`	Toggle	on / off

Style tab

Navigation Bar

Option	Type	Choices / range	Default
Distance From Edge `side_offset`	Slider	min 0, max 120, px	24
Vertical Position `v_pos`	Slider	min 0, max 100, %	50
Bar Background `nav_bg`	Color
Bar Padding `nav_pad`	Dimensions
Bar Radius `nav_radius`	Slider	min 0, max 999, px	999
Bar Border `nav_border`	Border
Bar Shadow `nav_shadow`	Box shadow
Gap Between Dots `gap`	Slider	min 0, max 60, px	14

Dots

Option	Type	Choices / range	Default
Dot Size `dot_size`	Slider	min 6, max 40, px	12
Dot Color `dot_color`	Color		rgba(16,24,40,.25)
Active Dot Color `dot_active`	Color		#6a11cb
Hover Dot Color `dot_hover`	Color
Dot Border `dot_border`	Border
Dot Radius `dot_radius`	Slider	min 0, max 50, %	50
Active Scale `active_scale`	Slider	min 1, max 2.5, px	1.4
Ring Around Active Dot `ring`	Toggle	on / off	yes
Icon / Number Size `icon_size`	Slider	min 8, max 30, px	14
Icon / Number Color `icon_color`	Color		#667085
Active Icon / Number Color `icon_color_a`	Color		#ffffff
Line Width (lines style) `line_w`	Slider	min 8, max 80, px	24
Line Thickness `line_h`	Slider	min 1, max 12, px	3

Tooltip / Label

Option	Type	Choices / range	Default
Typography `tip_typo`	Typography
Text Color `tip_color`	Color		#ffffff
Background `tip_bg`	Color		#101828
Active Label Color (labels style) `tip_color_a`	Color
Padding `tip_pad`	Dimensions
Radius `tip_radius`	Slider	min 0, max 30, px	6
Distance From Dot `tip_gap`	Slider	min 0, max 60, px	14
Prev/Next Arrow Color `arrow_color`	Color		#667085
Prev/Next Arrow Size `arrow_size`	Slider	min 10, max 40, px	18

Add it with the MCP tools

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