Description
Navrail turns your page’s headings into a horizontal, auto-scrolling navigation bar, the same pattern used by modern landing pages, documentation sites, and long-form pages to help visitors jump straight to the section they care about.
A classic Table of Contents is just one of its uses. It works equally well for:
- Landing page section navigation
- Long-form sales pages
- Documentation
- Service pages
- Product pages
- One-page websites
- Long articles built with Elementor
Add the widget, pick which heading levels to track, and Navrail handles the rest: it detects your sections automatically, smooth-scrolls to them on click, highlights the active one as visitors scroll, and keeps it in view, with no manual list-building required.
Key features
- Works with any Elementor page structure: headings, sections, anything with a heading tag
- Include/Exclude selectors for precise control over which headings are picked up
- Smooth scroll with active-section highlighting
- Auto-scrolling, swipeable navigation bar
- Optional item separators and hierarchical numbering (1, 1.1, 1.2, 2, …)
- Adjustable width, alignment, and full style control: colors, borders, spacing, independent Normal/Hover/Active states
- Optional leading text with Dynamic Tags support
- Optional title truncation, by width, character count, or word count
- Sticky positioning support
- RTL-ready
- Lightweight, no external libraries, loads only where the widget is used
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 “Navrail TOC & Navigation” widget (in the “Navrail” category) onto the page.
FAQ
-
Is this only for Table of Contents?
-
No. It’s a general-purpose horizontal section navigation. Table of Contents is one common use, but it works just as well for landing page section jumps, documentation, service/product page navigation, and long single-page sites.
-
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.
-
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.
This plugin is an independent, third-party extension for Elementor and is not affiliated with or endorsed by Elementor.com.
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.6.0
- Added: Exclude Selector (Content Navigation), to skip specific headings, sections, or elements even within the configured Scope.
- Added: responsive Width control under Style Navigation.
- Added: optional item separators between navigation items, with their own style controls (off by default).
- Added: optional hierarchical numbering (1, 1.1, 1.2, 2, …) for items, with its own style controls (off by default). The “Numbering” toggle lives under Content Navigation, since it changes the item’s actual text; its color control stays under Style Items.
- Changed: Edge Fade is now disabled by default (previously enabled by default).
- Changed: widget category renamed to “Navrail”; widget title updated to “Navrail TOC & Navigation”.
- Fixed: a page loaded (or refreshed) with a URL matching one of the navigation’s anchors could land a few pixels off from the target heading, because the browser’s native anchor jump happens before the navigation finishes rendering. The widget now corrects the scroll position once it has fully rendered.
- Fixed: the scroll destination when clicking a navigation item is now re-checked and corrected for a brief window after scrolling starts, protecting against pages where something (e.g. a header that only becomes sticky once scrolling begins) shifts the layout right as the scroll starts.
- Fixed: renamed the Sticky fallback section’s “Offset” control to “Sticky Offset” to avoid confusion with the unrelated “Scroll Offset” control under Content Navigation.
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 are now fully responsive (independent values for Desktop/Tablet/Mobile), matching Elementor’s standard inheritance.
- Added: minimal CSS-only Sticky fallback (Style Sticky), automatically shown only on sites without Elementor Pro, so it never duplicates Pro’s native Sticky motion effect.
- Verified: all user-facing strings are translation-ready via 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.