Page Nav — Spark Premium | HubSpot Theme Docs

Content

Links can be added manually or dynamically created based on Section Anchor modules added to the page

Styles

Set Dark Mode
Edit spacing

Note: Edit these following styles from your Theme Settings under the Components > Page Navigation section.

Customize link font styling
Change link hover color
Change background color of sticky navigation bar
Set Dark Mode colors for links, links hover, and sticky navigation bar

Usage Guide

The Page Nav module creates smooth, scrolling navigation that helps visitors jump between different sections of your long-form content pages. This module works exceptionally well on landing pages, product pages, resource hubs, and detailed service pages where you want to improve user experience by reducing scrolling time.

When you drag the Page Nav module into your page editor, you have two primary options for populating navigation links. Manual links give you complete control over the navigation structure—perfect for linking to specific sections, external resources, or when you want custom link text that doesn’t match your section headings. Dynamic links automatically generate navigation based on Section Anchor modules you’ve placed throughout your page, creating a seamless table of contents that updates as you modify your page structure.

The sticky navigation feature becomes particularly valuable on mobile devices and longer pages. When visitors scroll past the module’s original position, the navigation bar remains fixed at the top of their viewport, ensuring easy access to page sections without scrolling back up. You can customize the sticky bar’s background color in Theme Settings to maintain brand consistency or ensure proper contrast against your page content.

For optimal results, place the Page Nav module near the top of your page, typically after your hero section but before your main content begins. This positioning gives visitors an immediate overview of what they’ll find on the page while keeping the navigation easily accessible. The module integrates seamlessly with HubSpot’s Section Anchor modules, so you can build comprehensive page navigation systems without any coding knowledge.

Consider using contrasting hover colors to provide clear visual feedback when visitors interact with navigation links, enhancing the overall user experience on your HubSpot pages.