Page Navigation
Adds in-page navigation of on-page anchors or links that will stick to the top of the page on scroll.
Note: The section this module is added to should have its Content Alignment set to Full Width. Do not add margin or padding to the section, as this will negatively affect the sticky function.
**
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
Usage Guide
The Page Navigation module is designed to improve user experience on content-heavy pages by creating a sticky navigation bar that remains visible as visitors scroll through your content. This module is particularly valuable for long-form content like comprehensive guides, documentation pages, product feature overviews, or detailed case studies that SaaS and technology companies often publish.
When you drag this module into your page editor, it automatically detects anchor links within your page content, making it easy to create a table of contents that jumps to specific sections. You can also include external links to related resources, giving you flexibility in how you guide users through your content journey.
Best practices for implementation: Place this module near the top of your page, ideally after your hero section but before your main content begins. The sticky functionality ensures it remains accessible throughout the user’s reading experience. For anchor links to work properly, make sure you’ve added anchor tags to your heading modules or rich text sections using HubSpot’s built-in anchor link feature in the page editor.
The Dark Mode style option automatically adapts the navigation appearance to match your site’s color scheme, while the background and padding controls let you fine-tune the visual integration with your page design. This is especially useful when working with the Framework theme’s clean aesthetic, as you can maintain visual consistency across your technology or SaaS site.
This module works exceptionally well on service pages, product documentation, blog posts, and landing pages where you need to help visitors navigate complex information efficiently. The sticky behavior ensures users can quickly jump between sections without losing their place in your content hierarchy.