Table of Content
Overview
The Phenix Table of Content feature automatically generates a navigation menu from the headings (h2, h3, h4) in your content. This creates a structured table of contents that helps users navigate through long content pages by providing quick links to each section.
Implementation
To use the Table of Content feature, you need to:
- Add a container with the ID
table-of-content-list
to your page - Have content with headings (h2, h3, h4) inside an element with the class
.entry-content
- Initialize the utilities with the 'seo' type
<!-- Table of Contents Container -->
<ul id="table-of-content-list"></ul>
<!-- Content with headings -->
<div class="entry-content">
<h2>First Section</h2>
<p>Content goes here...</p>
<h3>Subsection</h3>
<p>More content...</p>
<h2>Second Section</h2>
<p>Additional content...</p>
</div>
// Initialize Table of Content
Phenix(document).utilities({
type: 'seo'
});
// Or initialize all utilities including Table of Content
Phenix(document).utilities();
How It Works
Once initialized, the Table of Content functionality:
- Scans your content for headings (h2, h3, h4)
- Automatically assigns IDs to each heading (section-0, section-1, etc.)
- Creates a hierarchical navigation menu based on heading levels
- Adds smooth scrolling links to each section
Hierarchical Structure
The Table of Content respects the hierarchy of your headings:
h2
elements become top-level items in the menuh3
andh4
elements become nested items under the precedingh2
For example, this content structure:
<h2>Main Topic</h2>
<h3>Subtopic 1</h3>
<h4>Detailed Point</h4>
<h3>Subtopic 2</h3>
<h2>Another Main Topic</h2>
Will generate this navigation structure:
- Main Topic
- Subtopic 1
- Detailed Point
- Subtopic 2
- Another Main Topic
Generated HTML Structure
The Table of Content generates a hierarchical navigation menu with the following HTML structure:
<ul id="table-of-content-list">
<li class="tx-nowrap">
<a href="#section-0" class="smoth-scroller">Main Topic</a>
<ul class="table-of-content-menu pdx-15">
<li class="tx-nowrap">
<a href="#section-1" class="smoth-scroller">Subtopic</a>
</li>
</ul>
</li>
<li class="tx-nowrap">
<a href="#section-2" class="smoth-scroller">Another Topic</a>
</li>
</ul>
The following CSS classes are used:
#table-of-content-list
- The main container.table-of-content-menu
- Nested menus for subtopics.tx-nowrap
- Prevents text wrapping in menu items.smoth-scroller
- Enables smooth scrolling to sections.pdx-15
- Adds padding to nested menus
Example Usage
Basic Table of Contents
<!-- Table of Contents Container -->
<div class="card mb-20">
<div class="card-header">
<h3>Table of Contents</h3>
</div>
<div class="card-body pdx-15">
<ul id="table-of-content-list"></ul>
</div>
</div>
<!-- Content with headings -->
<div class="entry-content">
<h2>Introduction</h2>
<p>Content goes here...</p>
<h3>Background</h3>
<p>More content...</p>
<h2>Getting Started</h2>
<p>Additional content...</p>
</div>
Sidebar Table of Contents
<div class="flexbox">
<div class="col-3">
<div class="position-sticky" style="top: 20px;">
<h4>On This Page</h4>
<ul id="table-of-content-list"></ul>
</div>
</div>
<div class="col-9 entry-content">
<h2>Introduction</h2>
<p>Content goes here...</p>
<h3>Background</h3>
<p>More content...</p>
<h2>Getting Started</h2>
<p>Additional content...</p>
</div>
</div>
Horizontal Table of Contents
<div class="mb-30">
<ul id="table-of-content-list" class="flexbox reset-list"></ul>
</div>
<div class="entry-content">
<h2>Section 1</h2>
<p>Content for section 1...</p>
<h2>Section 2</h2>
<p>Content for section 2...</p>
<h2>Section 3</h2>
<p>Content for section 3...</p>
</div>
Styling the Table of Contents
You can customize the appearance of your Table of Contents using CSS:
/* Main container */
#table-of-content-list {
list-style: none;
padding-left: 0;
}
/* Links */
#table-of-content-list a {
display: block;
padding: 5px 0;
color: var(--primary-color);
text-decoration: none;
}
/* Nested lists */
#table-of-content-list ul {
list-style: none;
margin-left: 15px;
}
/* Hover effect */
#table-of-content-list a:hover {
text-decoration: underline;
}
Integration with Smooth Scroll
The Table of Content automatically integrates with Phenix's Smooth Scroll functionality, creating a seamless navigation experience. The links generated in the table of contents include the smoth-scroller
class, which enables smooth scrolling to the target sections.
Best Practices
- Use meaningful and descriptive headings in your content
- Maintain a logical hierarchy of headings (h2 → h3 → h4)
- For long pages, use a sticky position for the table of contents
- Consider adding a title above the table of contents for clarity
- Place the table of contents near the top of the page for easy access
- For mobile devices, consider making the table of contents collapsible
Browser Compatibility
The Table of Content functionality is compatible with all modern browsers and uses standard DOM manipulation techniques for generating the navigation menu.