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