Current Page Anchored Links

On this page:

Overview

This component, shown above, acts as an interactive table of contents for a page that contains a large amount of information. After breaking a long page up into several sections, you can list those sections with links that allow your site visitor to jump directly to the content they're looking for.

When to use Current Page Anchored Links

When you have a lot of information to provide on a single page, this component provides a navigation system that limits the amount of scrolling required.
When a single page contains multiple topics, this component allows visitors to quickly identify and access the information most relevant to them.

Similar components

Accordion – Both these components help divide up long or multifaceted content on a single page, enable visitors to understand at a glance the types of information available on the page, and allow quick navigation to areas of interest.

Tips for best results

Place this component at or near the top of your page.
Not every page needs one. For pages with short content, or a single topic, there is no need to break it into sections. Save this component for long pages, and pages with multiple different topics or tasks a user might be looking to accomplish.
You'll need to insert anchors throughout your page text in order for this component to work.

Examples

Screenshot of a Rush University web page

On

- After your page is built, decide on the main categories or separate topics where you'd like a user to be able to jump directly.
- At the start of each new section, you'll place an anchor.
  Every component on a page contains a dedicated field at the top titled "Anchor tag." To designate the start of a new section, type a single-word descriptor into that "Anchor tag" field. No one will see this tag, so just choose a label that will serve as a unique identifier for this section.
  
  Image
  
  If you want to enable visitors to jump to the middle of a WYSIWYG, rather than the top, place your cursor where you want the new section to start. Click the Anchor tool in your WYSIWYG editing toolbar, which looks like a flag.
  
  Image
  
  When the pop-up dialog box appears, type your label in the "Anchor name" field and save.
  
  Image
- After you've placed anchor tags at the start of each section on the page, add a Current Page Anchored Links component.
- Fill in the required Title field. This title will appear at the top of your component to introduce it. Consider something like "On this page," "Contents," or "Learn more"
- The Links section will contain individual links to page sections.
  In the URL field, type a hashtag/number sign, then the first anchor tag label you defined on the page.
  In the Link text field, fill in the text that the visitor will click on to visit that section
  Continue adding more items, one for each section you defined on the page.
  
  Image
- When your Current Page Anchored Links component is complete, drag & drop it to the top of the page.