---
title: "One Page Scroll Navigation for Elementor"
url: https://theplusaddons.com/elementor-builder/header-builder/one-page-scroll-navigation/
date: 2025-05-30
modified: 2025-07-08
author: "Aditya Sharma"
description: "Create One Page Elementor Navigation Menu specifically designed for Single-Page Websites with long scroll content, making it easier for users to navigate through sections."
image: https://theplusaddons.com/wp-content/uploads/2024/07/Feature-image-one-page-Navigation-1024x536.jpg
word_count: 166
---

# One Page Scroll Navigation for Elementor

- [Demos](#demos)[Features](#features)- [Videos](#videos)- [Docs](#docs)- [Related Widgets](#related-widgets)- [Templates](#templates)
- -
- [Demos](#demos)[Features](#features)- [Videos](#videos)- [Docs](#docs)- [Related Widgets](#related-widgets)- [Templates](#templates)

## Add Icon or Dot Based Full One-Page Navigation on Elementor
One Page Elementor Scroll Navigation menu is usually placed prominently at the top of the page or in a fixed position to ensure it remains accessible as users scroll through the content. It often consists of links or buttons that, when clicked, smoothly scroll the page to the corresponding section.

[
View Demos
](#demos)
![](https://theplusaddons.com/wp-content/uploads/2024/07/One-Page-Navigation-On-ELemetor-1024x715.png)
## Live Demos of Elementor One Page Scroll Navigation
[![](https://theplusaddons.com/wp-content/uploads/2024/07/Custom-Icons-One-Page-Scroll-Navigation.png)](https://etemplates.wdesignkit.com/theplusaddons/one-page-scroll-navigation-demo-1/)
### Custom Icons One Page Scroll Navigation
[![](https://theplusaddons.com/wp-content/uploads/2024/07/Hotel-Booking-Website-Vertical-Dots-Navigation.png)](https://etemplates.wdesignkit.com/theplusaddons/one-page-scroll-navigation-demo-2/)
### Hotel Booking Website Vertical Dots Navigation
[![](https://theplusaddons.com/wp-content/uploads/2024/07/Elementor-One-Page-Scroll-Navigation-with-Left-Side-Dots.png)](https://etemplates.wdesignkit.com/theplusaddons/one-page-scroll-navigation-demo-3/)
### Elementor One Page Scroll Navigation with Left Side Dots
[![](https://theplusaddons.com/wp-content/uploads/2024/07/Elementor-One-Page-Scroll-with-Horizontal-Vertical-Navigation.png)](https://etemplates.wdesignkit.com/theplusaddons/one-page-scroll-navigation-demo-4/)
### Elementor One Page Scroll with Horizontal & Vertical Navigation
[![](https://theplusaddons.com/wp-content/uploads/2024/07/Full-Page-Product-Display-with-Fancy-Navigation.png)](https://etemplates.wdesignkit.com/theplusaddons/one-page-scroll-navigation-demo-5/)
### Full Page Product Display with Fancy Navigation
[![](https://theplusaddons.com/wp-content/uploads/2024/07/Automobile-Showcase-One-Page-Site-with-Vertical-Car-Icons.png)](https://etemplates.wdesignkit.com/theplusaddons/one-page-scroll-navigation-demo-6/)
### Automobile Showcase One Page Site with Vertical Car Icons

## Key Features of Elementor One Page Scroll Navigation
![](https://theplusaddons.com/wp-content/uploads/2024/07/Mulitple-Dots-Styles.png)
### Multiple Dots Styles
![](https://theplusaddons.com/wp-content/uploads/2024/07/Set-Navigation-at-Any-Position.png)
### Set Navigation at Any Position
![](https://theplusaddons.com/wp-content/uploads/2024/07/Show-Tooltip-on-Hover-or-Active-Slide.png)
### Show Tooltip on Hover or Active Slide
![](https://theplusaddons.com/wp-content/uploads/2024/07/Connect-Navigation-with-CSS-ID.png)
### Connect Navigation with CSS ID
![](https://theplusaddons.com/wp-content/uploads/2024/07/Connect-with-Page-Scroll-Widget.png)
### Connect with Page Scroll Widget
![](https://theplusaddons.com/wp-content/uploads/2024/07/Customize-Everything-Elementor-One-Page-Scroll-Navigation.png)
### Customize Everything

## Watch How it Works
Subscribe for more Such Elementor Video Tutorials