Page Navigation

Note: The section this module is added to should have its Content Alignment set to Full width. This entire section will stick to the top of the page as the user scrolls down.

View a live demo of this module.

Content

• Add as many links (anchors or external links)

Styles

• Can be set to dark mode
• Change background color
• Change padding on both desktop and mobile

---

Usage Guide

The Page Navigation module is designed specifically for long-form content pages where you want to help visitors quickly jump to different sections. This sticky navigation bar works exceptionally well on restaurant menus, service pages, and detailed product descriptions where users need to scan through multiple categories or sections.

When you drag this module into the page editor, position it near the top of your page content but below your main hero section. The module will automatically stick to the top of the browser window as users scroll, ensuring your navigation links remain accessible throughout their visit. This behavior makes it perfect for menu pages where customers want to quickly jump between appetizers, mains, and desserts, or service pages where prospects need to navigate between different offerings.

For the links to work properly as in-page navigation, you’ll need to add anchor links that correspond to sections lower on your page. In the HubSpot page editor, you can set custom anchor IDs on your sections or modules by expanding the advanced options in the inspector panel. Use descriptive anchor names like “#appetizers” or “#contact-info” to make your navigation intuitive.

The dark mode styling option is particularly useful when you’ve set a background image or darker theme colors in your page sections. You can adjust the background color to match your brand palette using the HubSpot color picker, and the responsive padding controls let you optimize spacing for both desktop and mobile viewing experiences.

Consider using this module on pages where you expect visitors to spend significant time reading or browsing, rather than quick landing pages where users typically convert immediately.