Navrail – Horizontal Navigation & Table of Contents

Navrail adds a horizontal, auto-scrolling navigation bar to your page. This is the same style of navigation used on many landing pages, documentation sites, and long articles, so visitors can jump straight to the part they want. It works with both Elementor and the WordPress block editor (Gutenberg).

Navrail TOC builds the navigation for you. Choose which heading levels to track (H2, H3, and so on), and it finds your sections automatically. It smooth-scrolls to a section when clicked, and highlights the current section as visitors scroll. No manual list-building needed.

Navrail Navigation lets you build the navigation by hand. Add items one by one, each with a title, an optional icon or image, and a link. A link can point to a section on the same page (with the same smooth scroll and highlighting as Navrail TOC), or to any normal URL, phone number, or email address.

Good for:

• Landing page navigation
• Long sales pages
• Documentation
• Service and product pages
• One-page websites
• Long articles

Navrail TOC features

• Works with any page: headings, sections, anything with a heading tag
• Choose which parts of the page to include or skip
• Optional numbers before each item (1, 1.1, 1.2, 2, …)
• Optional line separators between items
• Optional fixed label before the list
• Shortens long titles automatically (by width, character count, or word count)
• Optional “stick to top/bottom” behavior

Navrail Navigation features

• Add items by hand: title, optional icon or image, and a link
• Place the icon/image before, after, above, or below the title
• Keep all items the same height, even when some have an icon/image and others don’t
• Separate colors and styles for Normal, Hover, and Active states

Works the same in Elementor and the block editor

• Smooth scroll with highlighting of the current item
• Auto-scrolling, swipeable bar with a soft fade at each edge
• Right-to-left (RTL) language support
• Lightweight: no external libraries, and only loads on pages where it’s used
• Elementor also lets you set separate values for Desktop, Tablet, and Mobile; the block editor uses one value for all screen sizes

1. Upload the plugin ZIP via Plugins → Add New → Upload Plugin, or extract it into wp-content/plugins/.
2. Activate “Navrail”.
3. Elementor: edit a page with Elementor and drag in the “Navrail TOC” widget (finds headings automatically) or the “Navrail Navigation” widget (build the list yourself). Both are in the “Navrail” category.
   Block editor: open the block inserter and search “Navrail”. Add the “Navrail TOC” block, or the “Navrail Navigation” block (add “Navigation Item” blocks inside it for each link).

1. 

   Style settings panel in Elementor editor

2. 

   Frontend display of the horizontal TOC navigation bar

3.0.0

• Added: full support for the WordPress block editor (Gutenberg) — “Navrail TOC” and “Navrail Navigation” blocks, with the same features as the Elementor widgets: numbering, separators, a leading label, title shortening, sticky positioning, and separate Normal/Hover/Active styling. The block editor’s leading label is plain text; Elementor’s version also supports Dynamic Tags.
• Changed: renamed the plugin from “Navrail TOC for Elementor” to “Navrail – Horizontal Navigation & Table of Contents”, since it no longer needs Elementor. The plugin’s link on WordPress.org stays the same.
• Changed: Elementor is now optional. The plugin and its blocks work with no other plugin installed; the Elementor widgets simply stay inactive (with a friendly notice) until Elementor is installed.

2.0.0

• Added: a second widget, “Navrail Navigation” — build a horizontal navigation manually via a repeater (title, optional icon or image, and a link per item), instead of auto-detecting headings. Supports linking to a section on the current page (with the same smooth scroll, scroll offset, and active-section tracking as Navrail TOC) or to any normal URL, tel:, or mailto: link, which behaves as a completely normal link.
• Added: Icon/Image Position control (Style → Items, responsive) for Navrail Navigation — place the icon/image before, after, above, or below the title, independently per breakpoint.
• Added: Min Height control (Style → Items) for Navrail Navigation, to keep items a consistent height when some have an icon/image and others don’t.
• Added: Active Item Alignment control (Content → Navigation Behavior) for Navrail Navigation, matching the control already available on Navrail TOC.
• Added: independent Normal/Hover/Active typography and color controls for the item title (Style → Title) on Navrail Navigation, previously a single shared style for all states.
• Added: automatic clipping-safe spacing for item Box Shadow (Hover/Active) on Navrail Navigation. Because the navigation scrolls horizontally, a shadow could get cut off above/below the items; the widget now reserves enough room based on the shadow’s own Blur/Spread/Vertical values, with an optional manual buffer (Extra Space for Shadows) for edge cases.
• Fixed: item title spacing from its icon/image is now a gap on the item rather than a fixed margin on the title, so it correctly collapses to zero when only the title or only the icon/image is shown, and no longer leaves an inconsistent extra gap depending on icon position.
• Fixed: the Alignment control (Style → Navigation) on Navrail Navigation now positions the navigation bar itself within its container, instead of moving the items within the bar.
• Changed: shared horizontal-rail behavior (scroll, scroll-spy, edge fade, RTL, sticky, resize/destroy lifecycle, Elementor bootstrap) extracted into a common navrail-core.js/class-navrail-shared-widget.php base used by both widgets, so it isn’t duplicated. Navrail TOC’s own observable behavior is unchanged by this — only its internal code organization changed.
• Changed: Navrail TOC’s panel title reverted to “Navrail TOC” (from “Navrail TOC & Navigation”), now that a dedicated “Navrail Navigation” widget exists.

1.6.0

• Fixed: renamed the internal exclude config key to excludeSelector to avoid tripping a WordPress VIP coding-standards sniff that flags any exclude array key as if it were a get_posts()/WP_Query performance concern — a false positive here, since this key is just part of the widget’s own JS config output and has nothing to do with database queries, but renaming it avoids the false alarm entirely.
• 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_Widget classes to HTOC_Plugin/HTOC_Widget to 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-height so 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-label with 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_ready hook 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-label custom attribute (Elementor Advanced → Attributes), letting editors shorten a specific item’s label without relying on truncation.
• Added: Requires Plugins: elementor plugin 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.