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

Overview

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,

Markup

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>

Javascript

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;
});

ScrollSpy

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 <====*/
Phenix('.scrollspy-menu').scrollSpy();