Anchor Navigation

Introduction

The Anchor Navigation component is used to jump to specific parts of a page quickly without having to scroll. This is especially helpful on longer pages. This component works in conjunction with the Anchor Component.

See a live example here.

Need Help?

If you need help with a specific use case for the Anchor Navigation component or need guidance with appropriate configuration, please contact the web team.

Information

Specifications

Character Limit/Usage

There isn’t a strict character limit for the Anchor Navigation component. We recommend testing different blocks of text to determine the best fit for your specific use case.

It is important to use this component in conjunction with the anchor component in order for it to function correctly. For more information about the Anchor Component, visit this page

Image Requirements : N/A

Video Requirements: N/A

Authoring Instructions

Authoring Instructions

Anchor ID and Anchor Name should be added under Anchors tab. This component works in combination with the Anchor Component.

Add your anchor nav component and corresponding links. When doing so, create the anchor IDs which is where your link will anchor the user to.  Then add the anchor component with the the same ID used in the nav component. you can then add specifiic components within the anchor component that you want to show in that section. 

Avoid using this component inside a background container. It will compress the margins and interfere with any CTA's.

Below is a list of the configuration options:

  • Anchors - Add in the values that will hook to your anchor and text to identify.
  • CTA - Add an (optional) link to a page at the very end of the Anchor Bar.

SEO Guidance

Shorter anchor texts are generally more effective. We do not recommend cramming any of the anchor text with multiple keywords. The anchor text should give a clear, concise indication of what the linked section is about.

Styling Options and Instructions

This component has a set style.



Anchor Test 1
...

This is where the Standard Anchor Nav Links

 

 

.

.

.

.

.

 

Anchor Test 2

....

This is where the Anchor Nav with no CTA links

.

.

.

.

.

.

.


Anchor Test 3

....

This is where the Anchor Nav with no CTA links

.

.

.

.

.

.

.