Table of Contents
The Moko-Cassiopeia Joomla template includes built-in styling and integration for the Table of Contents (TOC) feature. When enabled, it automatically generates a navigable list of links to sections within your content, improving user experience and SEO.
This article demonstrates the TOC Right layout in Moko-Cassiopeia, where the full Table of Contents feature appears in a right-aligned floating panel beside the main content. The Moko-Cassiopeia Joomla template includes built-in styling and deep integration for the Table of Contents feature, automatically generating a navigable list of links to sections within your content. This feature not only improves user experience but also provides potential SEO benefits by creating structured anchor navigation.
Why Use the Table of Contents Feature?
The Table of Contents feature allows readers to quickly navigate to the sections they’re most interested in. It’s especially useful for long-form articles, tutorials, and documentation. With Moko-Cassiopeia, the TOC adapts to your color scheme and typography settings for a consistent, branded experience.
Improved User Experience
By providing quick navigation, the Table of Contents feature reduces scrolling fatigue and helps users find information faster, improving content accessibility and retention.
SEO Benefits
Search engines often display Table of Contents–generated anchor links in search results, making your content more visible and clickable, and potentially improving click-through rates.
How the Moko-Cassiopeia Table of Contents Feature Works
When the article’s Layout is set to a TOC layout, the template automatically detects heading tags (<h2>, <h3>, <h4>) and outputs a styled list of anchor links. The appearance can be customized via template settings or overridden with custom CSS.
Supported Heading Levels
- H2 — Primary sections
- H3 — Subsections
- H4 — Optional deeper sections
Responsive Design
On smaller screens, the Table of Contents feature collapses into a toggleable panel, keeping the interface clean while maintaining quick navigation access.
Example in Action
Jump Target Section
If you clicked this link from the Table of Contents, you jumped straight here. That’s the magic of anchor navigation.
Enabling & Positioning the Table of Contents Feature in Moko-Cassiopeia
- Open your article in Joomla Administrator.
- Go to Article Options → Layout.
- Choose one of the TOC layouts:
- TOC Left — The Table of Contents appears in a left-aligned floating panel beside the content.
- TOC Right — The Table of Contents appears in a right-aligned floating panel beside the content (as shown in this article).
- Save and preview your article with the Moko-Cassiopeia template applied.