Layout & Component Blocks

Anchor Links and Points

Overview

Anchor links help break up long pages and act as a table of contents, giving users a quick way to navigate between sections. The anchor list typically appears below the first one or two sections and becomes sticky as users scroll, staying visible at the top of the window. This improves page scanability and helps users understand the structure of the page.

To build this feature, you’ll use two components:

  • Anchor List – Displays the menu of links.
  • Anchor Points – Marks the sections the links scroll to.

 

When to Use

  • To break up long pages into easily navigable sections.
  • When you want users to quickly jump to relevant content without excessive scrolling.
  • To provide a clear overview of page structure for better usability.
How To

How To

How To Create the Anchor List Menu

  1. Navigate to the page you’d like to update, and enter the Edit Mode for the page.
  2. Choose the Section you would like to add the block, click the plus (+) icon.
  3. Select the Anchor List component from the component list.

Add Anchor List Heading

  1. Heading: Ensure the anchor list name implies the links are for information on the page and not linking externally to other pages.
    • Anchor list title examples: On this page or In this article.
Screenshot of the Anchor List component showing where to add the Heading for the component

How to Create Anchor Points

  1. Navigate to the page you’d like to update, and enter the Edit Mode for the page.
  2. Choose the Section you would like to add the block, click the plus (+) icon.
  3. Select the Anchor Points component from the component list.

Add Name and ID

  1. Name: this is what will be shown in the Anchor List.  
  2. ID: this is what will appear in the URL. Use dashes instead of spaces. If left blank, the value is auto-generated from the Name field.  

To Hide an Anchor Point from Anchor List

The purpose of hiding an Anchor Point is to create a shareable hyperlink that scrolls directly to that section without displaying that Anchor Point in the Anchor List. For example, adding an Anchor Point “Program” to the CU Denver homepage and hiding it allows you to share a URL https://ucdenver.edu#program, which will scroll to that section of the page when someone clicks it.

  1. Toggle the hide from anchor list component to on.
Screenshot of modal to add an Anchor Point showing the Name and ID field

User Experience Best Practices

  • Match Anchor Titles to Section Headings. Ensure the anchor menu value, anchor point title, matches the heading of the section it is linking to.
  • Evaluate the Need for Anchor Links. Anchor links work best on long, detailed pages where users need quick navigation. Before adding them, consider whether the content can be shortened, reorganized, or rewritten for better readability. A well-structured page may eliminate the need for anchors altogether.
  • Keep User Behavior in Mind. Research from the Nielsen Norman Group, a leading user experience research firm, shows users typically read only about 28% of the text on a page, often skimming rather than reading thoroughly. This means clear headings and concise content are critical—even with anchor links.