Navigate to our DX Training Video guide for further visual guidance.
Purpose
The Basic Page Table of Contents feature automatically generates a navigation list and automatically generates links at the top of your page based on your headings, improving navigation and accessibility.
When to Use the Basic Page Table of Content
This feature is beneficial for:
- Long Pages: Helps users easily jump to specific sections within a lengthy page.
- Improved Navigation: The table of contents provides users with a quick overview of the page's structure and allows them to navigate directly to relevant sections.
- Enhanced Accessibility: Screen reader users and those who prefer keyboard navigation can efficiently access different sections.
- Complex Content: Improves organization and makes it easier for users to find specific information within the page.
Elements
- H2 Headings: Selecting the "H2" style to your headings within the page body. These headings will become part of the automatic Table of Content.
- "On this page" Functionality: Enable the "On this page" checkbox for H2 headings. This activates the Table of content generation.
- Automatic TOC: The Table of Content is created at the top of the page, listing your H2 headings as clickable links.
- Anchor Links: Clicking on a Table of Content link takes the user directly to the corresponding heading within the page content.
Reasons to Avoid Creating Manual Jump Links:
- Broken Links: Manually created links might break if the heading content or its location changes.
- Accessibility Issues: Screen readers might not interpret manual links correctly.
- Content Organization: Overreliance on manual links suggests poorly structured content. The table of contents encourages a more organized approach with clear headings.
Create a Basic Page content type
Create a new Basic Page by navigating to Content then to Add Content and from there you can select the Basic Page.
When creating a basic page, make sure to add all required fields.
We recommend you click "save" often.
Assign "H2"
For each heading that you want to turn into an anchor link or jumplink for that page, select the text and choose "H2 Heading" from the style.
Example of how to create a jumplink:
Turn on the "On this page" toggle underneath the body text
When you choose the 'On this page' functionality, an automatic Table of Contents-style section is created at the top of your page.
This toggle will automatically collect any text with an "H2 Heading" and create it into an anchor link at the top of the page.
