In page navigation
In page navigation, also known as anchor links or jump links, are used to help lead users through lengthy content on the same web page. This component is best used for discoverability and engagement with content that requires a long scroll.
Think of in page navigation (anchor links) as a table of contents, where the use of shorter written labels helps our users understand the topics being discussed on the page, and quickly navigate to that topic, or back to the top, without scrolling. This component should be directly below the banner and will become “sticky” navigation (locks to the top of the browser) once interacted with, which aids in showcasing and navigating to different topics.
All the information on the page should be related to the main topic being discussed and the anchor links should follow the content on the page sequentially.
Best practices
This component should only be used on long-form pages that contain lengthy sections of information. Having the ability to highlight the topics being discussed allow the user to quickly navigate to each section that may interest them, which improves user experience.
Note: This component can not be used on a page that contains body tabs. We feel it will lead to a poor user experience since the purpose of this component is to drive users vertically down a page, and body tabs introduce content across a horizontal path.
Rules and recommendations
| Anchor links |
|---|
| A: Backgrounds: BLK_Black, BLK_Yellow B: Anchor links: • 6 links max, minimum of 2 links required • Character counts are dependant on the number of links used Character counts per link label: • 2 links: ~63 • 3 links: ~43 • 4 links: ~30 • 5 links: ~22 • 6 links: ~18 * This component is hidden on mobile view due to sticky mobile nav and other potential sticky items |
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release |
Color pairing
It is our recommendation to always pair our in page navigation component directly below the header/banner component, and always match the background appearances of both components (banner + anchor link). A white banner can be paired with either anchor link color choice.
Do. Match hero banner appearance to your choice of in page navigation appearance.
Do. Match hero banner appearance to your choice of in page navigation appearance.
Do. White or black banner appearances can be used with either in page navigation appearances.
Don’t. Don’t mix different color backgrounds.