Table of Contents List Template

An intelligent table of contents that sticks to the page and tracks the reader's progress.

This template is ideal for long articles, documentation pages, or any content that benefits from clear, persistent on-page navigation.

A sticky table of contents list next to an article, with the current section highlighted.

Get Source Code Preview

About this Template

This component combines a semantic list with CSS and JavaScript to create a premium user experience. The table of contents list is built inside a nav element and remains visible on the screen using position: sticky. As the user scrolls through the article, a lightweight JavaScript "scrollspy" automatically detects which section is in view and highlights the corresponding link in the TOC.

Features

Automatic Highlighting: Uses the performant IntersectionObserver API to track the active section without impacting scroll performance.
Sticky Navigation: The TOC stays fixed in the viewport on larger screens for easy access.
Accessible by Default: Automatically applies aria-current="true" to the active link, communicating the user's location to assistive technologies.
Smooth Scrolling: Uses the CSS scroll-behavior property for a smooth transition when a user clicks a link.
Self-Contained Code: All functionality is scoped to the .toc-template class and uses no external libraries.

Code Breakdown

The layout consists of a parent container with two children: a nav for the Table of Contents, and a main for the article content. The TOC itself is a standard nested ul. Each heading in the main content that needs to be tracked has an id attribute that corresponds to the href of a link in the TOC.

The JavaScript first selects all headings that have an id. It then creates an IntersectionObserver, which is a modern browser API for efficiently detecting when elements enter the screen. The observer's callback function fires whenever a heading enters or leaves the viewport. Inside the callback, the script finds the TOC link that corresponds to the visible heading and applies an .active class and the aria-current="true" attribute to it, while removing them from the previously active link.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table of Contents List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #ffffff;
            color: #334155;
            margin: 0;
            padding: 0 2rem;
        }

/* Enable smooth scrolling on the root */
        html {
            scroll-behavior: smooth;
        }

/* ==========================================================================
           Table of Contents Component Styles - Copy from here
           ========================================================================== */
        .toc-template {
            --toc-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --toc-primary-text-color: #334155;
            --toc-secondary-text-color: #64748b;
            --toc-accent-color: #6d28d9;
            --toc-link-color: #475569;
            --toc-active-link-color: var(--toc-accent-color);
            --toc-bg-color: #f8fafc;
            --toc-border-color: #e2e8f0;
            
            font-family: var(--toc-font-family);
            color: var(--toc-primary-text-color);
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 0;
        }

.toc-template *,
        .toc-template *::before,
        .toc-template *::after {
            box-sizing: border-box;
        }
        
        .toc-template-layout {
            display: flex;
            flex-direction: column;
            gap: 3rem;
        }

/* The navigation is sticky on larger screens */
        @media(min-width: 1024px) {
            .toc-template-layout {
                flex-direction: row;
            }
            .toc-nav {
                position: sticky;
                top: 2rem;
                flex-basis: 300px;
                flex-shrink: 0;
                height: calc(100vh - 4rem);
                align-self: flex-start;
            }
        }
        
        .toc-nav h2 {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: var(--toc-secondary-text-color);
            margin: 0 0 1rem 0;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--toc-border-color);
        }

#toc-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        #toc-list li {
            margin-bottom: .5rem;
        }

#toc-list a {
            color: var(--toc-link-color);
            text-decoration: none;
            display: block;
            font-size: 0.9rem;
            padding: .25rem 0;
            transition: color 0.2s;
            border-left: 2px solid transparent;
            padding-left: 1rem;
        }
        
        /* Style for nested lists */
        #toc-list ul {
            list-style: none;
            padding-left: 1rem;
            margin-top: .5rem;
        }

#toc-list a:hover {
            color: var(--toc-active-link-color);
        }

#toc-list a.active {
            color: var(--toc-active-link-color);
            font-weight: 600;
            border-left-color: var(--toc-accent-color);
        }

.article-content h1 {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            line-height: 1.1;
        }
        
        .article-content .subtitle {
            font-size: 1.25rem;
            color: var(--toc-secondary-text-color);
            margin: 0 0 3rem 0;
        }
        
        .article-content h2,
        .article-content h3 {
            /* Ensures heading is not hidden by a fixed nav bar */
            scroll-margin-top: 4rem; 
        }

.article-content h2 {
            font-size: 2rem;
            margin-top: 3rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--toc-border-color);
        }

.article-content p {
            line-height: 1.7;
            margin-bottom: 1.25rem;
        }
    </style>
</head>
<body>

<div class="toc-template">
    <div class="toc-template-layout">
        
        <nav class="toc-nav" aria-label="Table of contents">
            <h2>On this page</h2>
            <ul id="toc-list">
                <li><a href="#ingredients">The Ingredients</a>
                    <ul>
                        <li><a href="#tangible">Tangible Goods</a></li>
                        <li><a href="#intangible">Intangible Concepts</a></li>
                    </ul>
                </li>
                <li><a href="#preparation">The Preparation</a></li>
                <li><a href="#the-bake">The Bake</a></li>
                <li><a href="#presentation">The Presentation</a></li>
            </ul>
        </nav>
    
        <main class="article-content">
            <h1>A Guide to Baking an Existential Crisis Cake</h1>
            <p class="subtitle">A surprisingly bitter dessert for the discerning palate.</p>

<section>
                <h2 id="ingredients">The Ingredients</h2>
                <p>This is not your grandmother's recipe, unless your grandmother was a nihilist philosopher with a sweet tooth. Procuring these ingredients requires more than a trip to the supermarket. It requires introspection.</p>

<h3 id="tangible">Tangible Goods</h3>
                <p>Begin with the basics. You will need 2 cups of all-purpose dread, 1 cup of melted ennui, and 3 eggs of mild-to-moderate disappointment. For leavening, a tablespoon of cosmic indifference is essential. Do not substitute with baking soda; the philosophical flavor profile will be completely off.</p>

<h3 id="intangible">Intangible Concepts</h3>
                <p>Next, fold in one lingering memory of a childhood dream you have long since abandoned. Add a dash of the sudden realization that you are just a collection of star-dust on a meaningless trajectory. Sweeten to taste with the faint, persistent ringing in your ears that only you can hear.</p>
            </section>

<section>
                <h2 id="preparation">The Preparation</h2>
                <p>In a large bowl, whisk the dread and ennui until they form stiff, grey peaks. In a separate bowl, beat the eggs of disappointment while staring blankly into the middle distance. Combine the two mixtures with a spatula of resignation. It is important not to over-mix. The batter should have the lumpy consistency of a Tuesday afternoon.</p>
                <p>Gently incorporate the cosmic indifference and your chosen intangibles. You will know the batter is ready when it sighs audibly. Pour it into a poorly-greased pan, for what is baking without the Sisyphean struggle of a cake that will not release?</p>
            </section>

<section>
                <h2 id="the-bake">The Bake</h2>
                <p>Preheat your oven to a vaguely unsettling temperature. Bake for what feels like an eternity, but is probably around 35 minutes. Do not check on the cake. A watched pot never boils, and a watched cake will only judge your life choices. The cake is done when a toothpick inserted into the center comes out questioning its own purpose.</p>
            </section>
            
            <section>
                <h2 id="presentation">The Presentation</h2>
                <p>Let the cake cool on a wire rack of shattered expectations. There is no need for frosting, as the cake is already layered with a thick glaze of irony. Serve in complete silence to a room full of people checking their phones. Pairs well with lukewarm tap water and the crushing weight of your own consciousness. Enjoy?</p>
            </section>
        </main>
        
    </div>

// Get all the sections that the TOC links point to
            tocLinks.forEach(link => {
                const sectionId = link.getAttribute('href').substring(1);
                const section = document.getElementById(sectionId);
                if(section) {
                    sections.push(section);
                }
            });

if (sections.length === 0) return;

</body>
</html>

View Output