Table of Content

Learn how to buildĀ a Table of Content components to navigate through the page content and jump to any piece of content quickly with Phenix Javascript and CSS Utilities


the Table of Content functionality of spying and navigating through your content by the headlines can be done easily by using phenix SpyScroll and a little bit of JavaScript, you can see a live example of it on this documentation of Phenix Design System,


you start by building an empty list in your HTML and give whatever class names you desire and style it as your design requires using our CSS utilities,

<ul class="reset scrollspy-menu"></ul>


Later on, we will use a function to gather all the headlines inside your content with javascript and attach them as items of the list that we created before,

/*===> Table of contents Menu <===*/
let last_title,
headlines = '.content-wrapper h1,.content-wrapper h2,.content-wrapper h3';
/*===> Loop Through Titles <===*/
Phenix(headlines).forEach((element, index) => {
//====> Element Data <====//
let title = element.textContent,
itemHtml = `<li><a href="#section-${index}" class="smoth-scroller">${title}</a></li>`;
//====> Set ID <====//
element.setAttribute('id', `section-${index}`);
//====> Sub-Titles <====//
if (element.matches('h3' || 'h4')) {
//===> ... <===//
let last_item = document.querySelector('.on-page-menu .scrollspy-menu > li:last-child'),
last_list = last_item.querySelector('ul');
//====> Create new Menu <====//
if (!last_list) last_list = Phenix(last_item).insert('append', '<ul></ul>');
//====> Create as Menu Item <====//
Phenix(last_list).insert('append', itemHtml);
//====> Create as Main Title <====//
else Phenix(content_menu).insert('append', itemHtml);
//====> Asign Last Title <====//
last_title = element;


now we have our Table of the Content list in our DOM we need to use Phenix SpyScroll on the list to activate the spying on what the current headline is and scroll to the clicked headline if needs to.

/*====> Scroll Spy Active <====*/

Table of Content