Page Navigation
In-page navigation of on-page anchors or links that will stick to the top of the page when scrolling.
Note: The section this module is added to should have its Content Alignment set to Full width.
View a live demo of this module.
Content
- Add navigation items of either anchor links or external links
Styles
- Set Dark Mode
- Edit the background and padding
How to Use This Module
The Page Navigation module creates a sticky table of contents that improves user experience on long-form pages by allowing visitors to jump between sections quickly. This module is particularly effective on product pages with detailed specifications, service pages with multiple offerings, or comprehensive guides where users need to navigate to specific information without scrolling through the entire page.
When you drag this module into the HubSpot page editor, position it near the top of your page content for maximum visibility. The module automatically detects anchor links you’ve created throughout your page content and transforms them into a clean, horizontal navigation bar that remains fixed at the top of the browser window as users scroll down.
Setting up anchor links is straightforward in HubSpot’s page editor. Simply select any heading or text element on your page, click the link icon, and create an anchor by typing a hash symbol followed by your anchor name (like #pricing or #features). These anchors will then appear as selectable options when configuring your Page Navigation module.
The Dark Mode style option is especially useful when your page has a dark hero section or when the navigation needs to stand out against light-colored content. You can also adjust the background opacity and padding to ensure the navigation bar complements your overall page design without overwhelming other elements.
This module works exceptionally well on landing pages, product detail pages, and resource pages where visitors often scan for specific information. For optimal performance, limit your navigation items to 5-7 links to prevent overcrowding on mobile devices, and use concise, descriptive labels that clearly indicate what users will find in each section.