Anchor links are hyperlinks that allow users to navigate within a web page to a specific section or element.
When the link is clicked, the page automatically scrolls to the section or element identified by the anchor tag's name attribute. We generally keep the use of these limited to long or complex web pages that require users to quickly find and access specific information.
In most cases, the Heading 2 level text is pulled from the body content to form the links in the Anchor link menu component.
Design
Our anchor link menu is text based and generally use our Body Copy Small size for the link text. It also has a 1 pixel high dividing line between links.
Example of a base anchor link menu component.
Placement
Desktop
We generally keep it positioned at the top left corner of the content section on a page to ensure our users can find it quickly and easily.
Mobile
For mobile devices, the anchor link menu is placed directly under the main page banner and before the content.
Example of an anchor link menu placement on a page.