The “On-page navigation” appears by default in the ‘structural section’ of the Product template and cannot be removed. This provides a page orientation system for anchor links that allow the user to navigate within the content of a page.
The on-Page is only used for heavy content pages. It allows the user to quickly switch between sections without leaving the page. Please be mindful of using this component since it does interfere with analytics and prevents us from accurately reading how users interact with the page. The On-page nav usually sits right below the hero image.
• The default size of the On-page Nav is 60 pix
• The spacing between items is 20 pix
• Number of items listed in the On-page Nav
Appearance and behavior
Text link become inactive when related section content appears (on state).
Becomes a ‘sticky’ header when page scrolls past the hero image.
Hero CTA button appears only on the ‘sticky’ header state.
Each section has equal padding (20px) at the beginning of the first word and end of the last word.
A. If a product name and section titles are one line, then text is centered in the height of the button (32px) in a 64px H nav bar.
B. If a product name is one line and a section(s) title is two lines, then text has 20px padding on top and bottom of 72px H nav bar. If text
wraps, it’s left-aligned.
C. If a product name is two lines, then text has 20px padding on the top and bottom of 84px H nav bar. If text wraps, it’s left-aligned. D. If a product name is long it should stay on one line only if there are fewer than five section titles.
• To support access to deeper level content when not in the primary navigation
• Use for level two navigation (anchor links) on Product pages
• When a Product has a minimum of three sections
• As primary navigation
• When a Product has more than six sections For sub-navigation below level two
• To navigate to another page
• Section labels should be limited to 1–3 words and as brief as possible.
• They can wrap to two lines max.
• Should be sentence case and left aligned.
The On-page nav on table sizes will change to a single bar with an error.
As you scroll down the page the content in the bar will change and indicate the section you are in.
The error on the right allows you to jump from section to section.
Appearance and behavior
The behavior for the small mobile size is the same as the table breakpoint.