Last Update:

Dec 7, 2021

0

The Best One-Page Navigation Addon for Elementor in 2021 (And it’s FREE!)

The Best One-Page Navigation Addon for Elementor in 2021 (And it’s FREE!)

Share on facebook
Share on twitter
Share on linkedin
One Page Navigation

One-Page websites are becoming more and more popular, and having a one-page navigation menu for these sites is important for users to navigate the page without having to manually scroll.  After reviewing the single-page navigation widgets and extensions for Elementor, we’ve determined what we think is the best one-page menu nav for your site.

The Premium Addons “Premium Vertical Scroll” widget is the best one-page menu navigation widgets for Elementor because it has all the standard options like left, right, top and bottom menu positions uses the sections you’ve already created on the page, has a unique feature that allows you to place a traditional navigation menu at the top of the page for added user experience, and is FREE. 

Continue to read below for our review of this widget, along with our reviews the other alternative one-page nav menu items.

But first…

What is a One-Page Navigation Menu Addon?

A One-Page Navigation Menu is a menu that appears ever-present on a website page, that enables the user to scroll between the different sections of the page simply by clicking the different menu items. Its benefit is to allow the user to navigate to different sections without having to scroll up and down the page manually. It is usually found on the left or right-hand side of the page, with menu items that consist of either "dots" or icons to denote the different sections of the page.

What features make for a good One-Page Navigation Menu Addon?

There are many features that can separate different one-page nav menu addons from each other. The most important ones include:

  1. Scroll Direction : Which direction does the page scroll? Vertical, Horizontal?
  2. Menu Position : Where on the page is the menu found? Top, Bottom, Left, Right?
  3. Menu Content : What visual content is used to denote the different menu items? Text, Dots, Icons, Images, SVG?
  4. Section Content : How is the content of each section created? Text Editor, Template, Existing Page Sections?
  5. Other : Any other features that adds to the benefit of this widget/extension

 

One Page Navigation

Here are some of the best One-Page Navigation Menus widgets for Elementor

JetElements -
"Scroll Navigation"
HT Mega -
"Scroll Navigation"
Element Pack -
"Scrollnav"
PowerPack -
"Page Navigation"
Essential Addons -
"One Page Navigation"
The Plus Addons -
"One Page Scroll Navigation"
Premium Addons -
"Horizontal Scroll"
Dynamic.ooo -
"Page Snap Scroll"
Premium Addons -
"Premium Vertical Scroll"

Recommended

 Comparison Table

DeveloperNameFree or ProScroll DirectionMenu PositionMenu ContentSection ContentOther
Essential AddonsOne Page NavigationPro5Vertical4 Positions - Top, Bottom, Left, RightIcons, SVGSections you create(1) Tooltips
PowerPackPage NavigationPro4Vertical4 Middle Positions - Top, Bottom, Left, RightIconsSections you create(1) Tooltips
Premium AddonsPremium Vertical ScrollFree8Vertical6 Positions - Left (Bottom, Middle or Top), Right (Bottom, Middle or Top)DotsSections you create(1) Tooltips (2) List Items*
JetElementsScroll NavigationPro1Vertical2 Positions - Left (Middle), Right (Middle)Icons, SVGSections you create(1) Tooltips w/ Icons*
Premium AddonsHorizontal ScrollPro7Horizontal3 Positions - Bottom, Left, and RightDots, Arrows, Pagination NumbersElementor Template, Sections you create(1) Background images per section (2) Number of slides per viewport (3) Progress bar (4) Scroll w/ fixed content
Dynamic.oooPage Snap ScrollPro7Vertical1 Position - Middle Left9 Presets (dots, bars, vertical lines, lines, squares, SVG and more)*Sections you create(1) Show the title of the section when scrolling, hover or active (2) Choose to show/update the hash in the browser URL
The Plus AddonsOne Page Scroll NavigationPro6Vertical8 Positions - Vertical (Right or Left), Horizontal (Top or Bottom)Icons (including Fontawesome) with animationsSections you create(1) Tooltips (2) Background styling (3) Scroll Offset
Element PackScrollnavPro3Vertical8 Positions - Vertical (Middel : Right or Left), Horizontal (Middle : Top or Bottom)Text, DotsSections you create
HT MegaScroll NavigationFree2Horizontal, Vertical2 Positions - Vertical (Middle Right), Horizontal (Middle Top)DotsText Editor, Elementor Template

*Unique to this addon

The Pros and Cons of Each Widget/Extension

This is a fairly limited widget but does provide the “essentials” of what some designers need.

How it works : This widget uses the page sections you’ve created as the content. Assign IDs to each section (CSS ID field) and associate the section IDs to the widget’s section items.

Features

  1. Scroll Direction : Vertical

  2. Menu Position : 2 Positions - Left (Middle), Right (Middle)

  3. Menu Content : Icons, SVG

  4. Section Content : Sections you create

  5. Other : (1) Tooltips w/ Icons*

Pros

  • Label and Hint icon adds further visual interest and clarification in nav

Cons

  • Vertical scroll only
  • Limited menu positioning (Left or Right only)

This widget is a good choice for those needing a simple “dots” only navigation and for being able to quickly enter in content via Text Editor (or if you want to take the time to create a Template) without having to create Sections.

It also has the rare option of being able to work both Vertically and Horizontally.

How it works : One widget allows you to add multiple section “items” which you then populate either using a Text Editor or Template.

Features

  1. Scroll Direction : Horizontal, Vertical

  2. Menu Position : 2 Positions - Vertical (Middle Right), Horizontal (Middle Top)

  3. Menu Content : Dots

  4. Section Content : Text Editor, Elementor Template

  5. Other :

Pros

  • It’s FREE
  • No need to create Sections and assign IDs, simply use the section items created in the widget
  • Both Vertical and Horizontal scroll Direction – most addons are Vertical only
  • Template option for content allows for any type of content

Cons

  • Menu Content is “dots” only, no icons
  • No Tooltips

This is a straight-forward widget with minimal options, but enough for the most common needs.

How it works : Create sections and assign IDs ie. section-1, section-2 etc., then drop in the Scroll Nav widget in a section on the page.

Features

  1. Scroll Direction : Vertical

  2. Menu Position : 8 Positions - Vertical (Middel : Right or Left), Horizontal (Middle : Top or Bottom)

  3. Menu Content : Text, Dots

  4. Section Content : Sections you create

  5. Other :

Pros

  • Creating your own Page Sections allows for diverse content
  • 8 Menu Position options allow you to place your menu almost anywhere

Cons

  • You have to create your own Page Sections and set IDs
  • Vertical Scroll only

This is a no-bells and whistles One-Page navigation widget which is perfect for most single-page website needs – standard Menu positions, Icon content, uses Sections, and has Tooltips.

How it works : Like most, this widget is placed on the page and the menu automatically appears in the page position you choose in the settings (top, bottom, left, right). Then assign IDs to the CSS ID field of the sections, which you then reference in the section items of the widget.

Features

  1. Scroll Direction : Vertical

  2. Menu Position : 4 Middle Positions - Top, Bottom, Left, Right

  3. Menu Content : Icons

  4. Section Content : Sections you create

  5. Other : (1) Tooltips

Pros

  • Simple to use
  • Tooltip feature is helpful for section clarification before clicking

Cons

  • Vertical scroll only

This is a straight-forward One-Page navigation widget that provides all the basics for most single-page website needs – standard Menu positions, Icon content, uses Sections, and has Tooltips.

How it works : Like most, place the widget in its own section at the bottom of the page. Choose alignment to determine where it appears on the page (top, bottom, left, right) and then assign IDs to the CSS ID field of the Sections. You then reference these IDs in the section items of the widget.

Features

  1. Scroll Direction : Vertical

  2. Menu Position : 4 Positions - Top, Bottom, Left, Right

  3. Menu Content : Icons, SVG

  4. Section Content : Sections you create

  5. Other : (1) Tooltips

Pros

  • Simple to use
  • Tooltip feature is helpful for section clarification before clicking

Cons

  • Vertical scroll only

This is a feature-rich widget making it a diverse choice for many different kinds of one-page projects. Having tooltips is helpful for increase nav clarification.

How it works : Create Sections and assign IDs to them. Drop the Scroll Navigation widget on your page and assign your section IDs to each of the repeater items (one item per section)

Features

  1. Scroll Direction : Vertical

  2. Menu Position : 8 Positions - Vertical (Right or Left), Horizontal (Top or Bottom)

  3. Menu Content : Icons (including Fontawesome) with animations

  4. Section Content : Sections you create

  5. Other : (1) Tooltips (2) Background styling (3) Scroll Offset

Pros

  • 5 different preset styles
  • Animations for Menu Content
  • Tooltips
  • Background can be styled with color or image, use of box-shadow etc.. Scroll Offset allows you to hide the navigation until a certain number of pixels have been scrolled
  • Many additional options and styles

Cons

  • Vertical scrolling only

This is one of the few widgets that allows you to page scroll Horizontally, and with a lot more features than many of the Vertical ones.

The only other Horizontal widget is the less featured HT Mega – Absolute Addons
“Scroll Navigation” widget.

How it works : Create page Sections with assigned IDs, and then assign the ID to the Content “items” in the widget.

Features

  1. Scroll Direction : Horizontal

  2. Menu Position : 3 Positions - Bottom, Left, and Right

  3. Menu Content : Dots, Arrows, Pagination Numbers

  4. Section Content : Elementor Template, Sections you create

  5. Other : (1) Background images per section (2) Number of slides per viewport (3) Progress bar (4) Scroll w/ fixed content

Pros

  • One of the only Horizontal scroll effects
  • Many amazing features and effects
  • Fixed content effect while other content scrolls is unique
  • You can set overall background images per section for increased visual impact
  • Additional settings like the number of slides per viewport are available
  • Choose to show a progress bar or not
  • Choose to scroll while some content remains fixed

Cons

  • Horizontal only, not vertical
  • Only dots for Menu Content, no icons

The implementation of this feature is unlike any of the other One-Page Navigation widgets. This is actually an extension and not a widget. With a little help from the documentation, you can auto-scroll between the existing Sections on the page without having to assign Section IDs.

How it works : This is unique in that it’s an extension to the Page Settings of any page. Set the class of each section (same class) and the Snap Scroll will auto move between sections on scroll.

Features

  1. Scroll Direction : Vertical

  2. Menu Position : 1 Position - Middle Left

  3. Menu Content : 9 Presets (dots, bars, vertical lines, lines, squares, SVG and more)*

  4. Section Content : Sections you create

  5. Other : (1) Show the title of the section when scrolling, hover or active (2) Choose to show/update the hash in the browser URL

Pros

  • A huge amount of control and diversity of presentation of the nav
  • 9 Menu Content items
  • Auto scrolls without having to create different section IDs
  • Show the title of the section when scrolling, hover or active
  • Choose to show/update the hash in the browser URL

Cons

  • Vertical scroll only
  • Menu Position is left only
  • It’s a little more complicated to understand initially and reference to documentation is needed

Recommended

What separates this widget from the others is the additional traditional Menu Nav you can add to the top, and the  Top, Middle and Bottom vertical alignment of the One Page Navigation menu.

How it works : This is another widget that uses the page sections you’ve created as the content. Assign IDs to each section (CSS ID field) and associate the section IDs to the widget’s section items.

Features

  1. Scroll Direction : Vertical

  2. Menu Position : 6 Positions - Left (Bottom, Middle or Top), Right (Bottom, Middle or Top)

  3. Menu Content : Dots

  4. Section Content : Sections you create

  5. Other : (1) Tooltips (2) List Items*

Pros

  • It’s one of the best widgets and it’s FREE
  • Additional vertical alignment of the menu to top, MIDDLE or bottom is helpful
  • Additional Top traditional Nav adds to ease of user navigation experience
  • Tooltip feature is helpful for Menu item clarification before clicking
  • Adding “List Items” allow you to show an additional traditional top menu nav
  • Allows adding of tooltip per section

Cons

  • Vertical scroll only
  • Adding tooltips is not intuitive

If you’ve found a widget or extension you think is better, or simply want to add your insights to what we’ve mentioned above, please add a comment below.

Comments

Reading and adding comments are for Members Only. But you can easily become a member by registering here

Leave a Reply

WP Which Plugin is a quick and easy tool to help you find the right Elementor Addons (widgets and extensions) for your WordPress website projects! We are not associated with Elementor or any of the Addon Plugins. We use affiliate links where possible to help support this site. Learn more about us.

Want to hear about new Elementor Addons as they come out?

Want to know about the latest ELEMENTOR  Widgets, Extensions and Addons when they come out?

We don’t share your email with anyone, nor do we spam!

This website uses cookies to ensure you get the best experience. By continuing to browse on this website, you accept the use of cookies for the above purposes.