Navigation · Elementor
One Page Navigation widget for Elementor
Anchor navigation for a one-page layout. Links scroll to sections; styling is CSS-only.
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
Anchor navigation for a one-page layout. Links scroll to sections; styling is CSS-only.
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 “One Page Navigation”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Horizontal Position”, “Vertical Position”, “Show Tooltip”, “Stretch Vertically”. Style and Content tabs are listed on this page.
When to use it
- A landing page with five sections.
- A restaurant one-pager.
- A personal site with stacked chapters.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Navigation Items — Horizontal Position | Options: Left; Right. |
| Navigation Items — Vertical Position | Options: Top; Middle; Bottom. |
| Navigation Items — Show Tooltip | Switcher inspector control (`kng_one_page_nav_show_tooltip`). |
| Navigation Items — Stretch Vertically | Switcher inspector control (`kng_one_page_nav_v_stretch`). |
| Navigation Items — Section ID | Section ID without #. |
| Navigation Items — Section Name (Optional) | It is used for tooltip. |
| Navigation Items — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Navigation Items — Custom Colors | Use custom colors for this icon instead of global from the Style tab. |
| Navigation Items (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Navigation Items (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Navigation Items (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Navigation Items (Hover) — Color | Writes CSS (king-addons-one-page-nav-item, color, fill) onto the widget’s front-end markup. |
| Navigation Items (Hover) — Background Color | Writes CSS (king-addons-one-page-nav-item, background-color) onto the widget’s front-end markup. |
| Navigation Items (Hover) — Border Color | Writes CSS (king-addons-one-page-nav-item, border-color) onto the widget’s front-end markup. |
| Navigation Items | Repeater rows; render() loops each item to build the list or slides. |
| Navigation Box — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-one-page-nav`. |
| Navigation Box — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Navigation Box — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-one-page-nav`. |
| Navigation Box — Items Gap | Space between navigation items. |
| Navigation Box — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Navigation Box — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Navigation Box — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Navigation Box — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Navigation Box — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Navigation Item (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Navigation Item (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Navigation Item (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Navigation Item (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-one-page-nav-item i, {{WRAPPER}} .king-addons-one-page-nav-ite…`. |
| Navigation Item (Hover) — Color | Writes CSS (king-addons-one-page-nav-item, color, fill) onto the widget’s front-end markup. |
| Navigation Item (Hover) — Background Color | Writes CSS (king-addons-one-page-nav-item, background-color) onto the widget’s front-end markup. |
| Navigation Item (Hover) — Border Color | Writes CSS (king-addons-one-page-nav-item, border-color) onto the widget’s front-end markup. |
| Navigation Item (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-one-page-nav-item:hover i, {{WRAPPER}} .king-addons-one-page-n…`. |
| Navigation Item — Transition Duration (ms) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 100, min 0, max 5000). |
| Navigation Item — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (default 16, min 0). |
| Navigation Item — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Navigation Item — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Navigation Item — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Navigation Item — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (default 0, min 0). |
| Navigation Tooltip (optional) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Navigation Tooltip (optional) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-one-page-nav-item .king-addons-one-page-nav-tooltip`. |
| Navigation Tooltip (optional) — Background Color | Writes CSS (background, king-addons-one-page-nav-tooltip, color) onto the widget’s front-end markup. |
| Navigation Tooltip (optional) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (default 4, min 0). |
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
What does One Page Navigation actually change on the page?
Anchor navigation for a one-page layout. Links scroll to sections; styling is CSS-only. Inspector labels from this widget’s PHP include “Horizontal Position”, “Vertical Position”, “Show Tooltip”, “Stretch Vertically”.
How do I add One Page Navigation in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “One Page Navigation”, 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.
Mega Menu
A menu widget that can hold Elementor content in dropdowns — columns, cards, CTAs — not only nested links.
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 One Page Navigation after you activate it.