Page Nav
An in page navigation with links generated dynamically or added manually
View a live demo of this module.
Content
- Generate links dynamically from Section Anchor modules added to the page
- If adding manually set the Label and whether the link is an anchor link or external link
Styles
- Set Dark Mode
- Change background color
- Edit module spacing
How to Use the Page Nav Module
The Page Nav module creates a smooth navigation experience for long-form content pages by automatically generating anchor links to different sections. This module is particularly valuable for comprehensive service pages, detailed product descriptions, lengthy blog posts, or knowledge base articles where visitors need to quickly jump to specific topics.
When you drag the Page Nav module into your page through the HubSpot page editor, it can automatically detect Section Anchor modules you’ve placed throughout your content. This dynamic linking saves you time and ensures your navigation stays synchronized as you add or remove sections. Simply place Section Anchor modules above your key headings or content blocks, and the Page Nav will populate with those anchor points.
For pages that don’t use Section Anchor modules, you can manually configure the navigation links. This flexibility allows you to link to external resources or create anchor links to specific HTML elements using custom anchor IDs. Manual configuration works well when referencing content outside your current page or when working with legacy content that doesn’t use the Section Anchor system.
The Dark Mode styling option helps the Page Nav blend seamlessly with your page design, especially useful on pages with dark hero sections or premium branded layouts. Position this module near the top of your page—typically after your hero section—so visitors can orient themselves before diving into detailed content.
Pro tip: The Page Nav module works exceptionally well on Spark Premium’s pillar page and service detail templates, where visitors often scan for specific information. Test your anchor links in preview mode to ensure smooth scrolling behavior across different devices.