Description
Navrail TOC for Elementor adds a horizontal section-navigation bar to any Elementor page. It automatically detects your headings, highlights the current section as visitors scroll, and keeps that item in view — no manual list-building required.
Key features
- Automatic heading detection (choose which H1–H6 levels to include)
- Smooth scroll with active-section highlighting
- Auto-scrolling, swipeable navigation bar with edge fade
- Optional leading text with Dynamic Tags support
- Full style control: colors, borders, spacing, and separate Normal/Hover/Active states
- Optional truncation for long titles
- Lightweight — no external libraries, loads only where the widget is used
This plugin is an independent, third-party extension for Elementor and is not affiliated with or endorsed by Elementor.com.
Screenshots
Installation
- Upload the plugin ZIP via Plugins Add New Upload Plugin, or extract it into
wp-content/plugins/. - Activate “Navrail TOC for Elementor”.
- Edit any page with Elementor and drag the “Horizontal TOC” widget (in the “Horizontal TOC” category) onto the page.
FAQ
-
Is this plugin free?
-
Yes, completely. Every feature described above is included — no premium version, no upsells, no ads.
-
Does this require Elementor Pro?
-
No. Only the free Elementor plugin is required.
-
Does this work with Elementor’s Sticky effect?
-
Yes. If Elementor Pro is active, apply its native Sticky motion effect to the widget’s Container. If Elementor Pro is not active, a built-in Sticky option appears automatically in the widget’s Style tab.
-
Why don’t I see any items?
-
The widget builds its navigation from headings already on the page. Make sure the selected Heading Levels match the headings actually used in your content.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Navrail TOC for Elementor” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Navrail TOC for Elementor” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.3.0
- Renamed the plugin from “Horizontal TOC for Elementor” to “Navrail TOC for Elementor” (slug: navrail-toc-for-elementor) at the request of the WordPress.org Plugins Team review, to add a distinctive identifying term ahead of the trademark reference, per their naming guidelines.
1.2.1
- Fixed: removed “Plugin URI” / “Author URI” / “Domain Path” placeholder header values that fail WordPress.org Plugin Check (a placeholder domain, and a Domain Path pointing at a folder this plugin does not ship).
- Fixed: removed the discouraged
load_plugin_textdomain()call — WordPress core has auto-loaded plugin translations by text domain since 4.6. - Fixed: renamed
Horizontal_TOC_Plugin/Horizontal_TOC_Widgetclasses toHTOC_Plugin/HTOC_Widgetto consistently use the plugin’s established prefix. - Updated: “Tested up to” to 7.0.
1.2.0
- Fixed:
item_padding‘s built-in default value could trigger a known Elementor core bug where the Tablet/Mobile responsive placeholder rendered as garbled text (e.g. “[object Object]”) for Dimensions-type controls with an asymmetric (unlinked) default. The default has been removed; the control’s description now suggests a starting value instead. - Added: “Max Characters”/”Max Words” (truncation length) are now responsive — set separate values per Desktop/Tablet/Mobile, consistent with Elementor’s standard breakpoint inheritance.
- Added: a minimal CSS-only Sticky fallback (Style tab), automatically shown only on sites where Elementor Pro is not active, so the widget can still be made sticky without duplicating Elementor Pro’s native Sticky motion effect where it’s available.
- Improved: resizing the viewport (including switching Desktop/Tablet/Mobile preview inside the Elementor editor) now immediately re-applies the correct per-breakpoint truncation length and active alignment.
- Confirmed: all 100+ user-facing strings are wrapped for translation, with a text domain matching the plugin slug.
1.1.1
- Fixed: added a baseline
min-heightso the navigation reserves space before JS populates it, preventing a layout shift (CLS) on first paint when no explicit Min Height is set. - Fixed: Character/Word truncation modes now set
aria-labelwith the full heading text whenever the visible label is shortened, so screen reader users get the complete link purpose rather than the clipped text.
1.1.0
- Fixed:
frontend/element_readyhook registration could silently fail to fire when Elementor’s own frontend script loaded after this plugin’s script (e.g. under deferred/module script loading). Registration is now timing-safe in both directions. - Fixed: item padding was ignored on the trailing side when “Truncate Long Titles” was enabled; truncation now applies to an inner label element instead of the clickable link itself.
- Added: “Truncate By” option — truncate by pixel width, character count, or word count.
- Added: “Truncation Style” option — ellipsis (…) or a soft fade-out mask, both RTL-aware.
- Added: per-heading custom label override via a
data-toc-labelcustom attribute (Elementor Advanced Attributes), letting editors shorten a specific item’s label without relying on truncation. - Added:
Requires Plugins: elementorplugin header for native WordPress dependency handling (WP 6.5+). - Changed: default Heading Levels is now H2 only (previously H2 + H3).
1.0.0
- Initial release.