Anchor Links

The Anchor Links component provides in-page navigation and an indication of the content that is available lower on the page. Anchor links allow users to go directly to the associated section of the page by clicking on the link. Consider using the Anchor Links component when the sections of content are disparate and not directly connected to one another, but do relate to the page itself. Anchor Links can be particularly useful on pages that require a lot of scrolling, but can also be helpful to drive users to a section of the page that is most relevant to them.

Example

Use Cases

Authoring, Requirements and Specifications

Required

  • Page Components: there must be components on the page for the buttons to link to


Anchor Links

  • Quantity: 2-6


Link Text

  • Required Field
  • Usage: Label on anchor link
  • Case: Title
  • Character Count (recommended max.): 25 including spaces
    • Match section heading linking to if character count allows
    • If character count of section heading is too long, the Link Text must be similar in context
  • Translatable Field: Yes


Component ID

  • Required Field
  • Usage: Specific identifier of the section the anchor link is connected to
    • The Show/Hide toggle within the component authoring window displays the component ID within the associated component on the page
  • Translatable Field: No


Authoring Notes

  • Show/Hide: toggle control within the authoring window that displays the component ID within the associated component on the page
  • Optional: the Anchor Links can be hidden on mobile by selecting the checkbox in the authoring window
  • Layout Options: should not be used within the Column Control component


Similar Components

  • Use the Accordion Component when the content is related and the sections of content are of different lengths
  • Use the Tab Control Component when providing content that is related and similar in length