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.

Usage

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.

Fixed and flexible

Fixed
• The default size of the On-page Nav is 60 pix
• The spacing between items is 20 pix
• Behavior

Flexible
• 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.

Specification

Interaction pattern

Do’s and dont’s

Do’s
• 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

Do’s
• As primary navigation
• When a Product has more than six sections For sub-navigation below level two
• To navigate to another page

Copy guidelines

• 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.

Usage

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

Interaction pattern

Usage

The behavior for the small mobile size is the same as the table breakpoint.

  • Was this Helpful?
  •