The “On-page navigation” component provides a system for orienting anchor links on the page, allowing the user to navigate the content more easily.


On-Page navigation usage

The on-page nav is only used for heavy content pages. It allows the user to quickly switch between sections without leaving the page. The on-page nav sits right below the hero image.


When to use tabs

It is used to support quick access to deeper level content without scrolling the entire page

Use for level two navigation (anchor links) on Product pages

When a Product page has a minimum of three sections


When not to use tabs

As primary navigation

To navigate to another page

As a secondary navigation

Appearance and behavior

Provides a common navigational system that allows the user to access core product features

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



Desktop Example (ON HOVER)


Font specs

Active label
Font: AvenirNext forIntuit, 16px/20px Demi (600)
Color: #393A3D

Inactive label
Font: AvenirNext forIntuit, 16px/20px Reg (400)
Color: #6B6C72


Padding specs

Top: 20px
Left: 40px
Bottom: 20px
Right: 40px

Stroke specs

Stroke: solid 1px #D4D7DC

Elevation specs

Drop shadow
Color: #000000
Opacity: 10%
X: 0
Y: 4
Blur: 12
Spread: 0

Responsive behavior

  • Was this Helpful?