Anchor/Sticky Navigation

This component creates tabs that let users see an overview of content and jump to sections they are interested in.

This is content for the first section.

By using the anchor navigation, your screen will jump here.

This is content for the second section.

By using the anchor navigation, your screen will jump here.

This is content for the third section.

By using the anchor navigation, your screen will jump here.

Usage Criteria

This component allows users to quickly see an overview of different sections of content. Once a tab is clicked, they can jump to the position of the page where that content starts.

This allows the user to avoid scrolling through the entire page if they already know what information they are interested in. 

Do's and Don'ts

  • Use this component for long pages that have a large amount of content. If the page is short, this component may not be necessary.
  • Continue to provide headers within each section, even though they may already be mentioned in the component. If not, a user scrolling through could have trouble finding where a section begins and ends.

Design Notes

This component is good for information that authors want most users to read, or information that is important. If the content is shorter and may not be relevant to most users, consider using the Accordion component instead, so users have the option to show or hide information and the component will take up less space.

Configurable Options

This component is configured using multiple instances of the Marker Title component. Each will specify a section name under the Marker Title text field that is then used by the Anchor/Sticky Navigation to autopopulate the tab labels and jump to the right position on the page after the tab is clicked.

Developer Notes

Type Name
AEM Component Name Anchor/Sticky Navigation
Code Base Name  
resourceSupertype  
SCSS Attributes  
JavaScript  
Status  
Version