Skip to main content Accessibility Feedback

<simple-toc>

Create a basic table of contents from the page headings.

Source Code

Usage

Include a <simple-toc> element in your HTML. It will automatically generate a list of anchor links to all of the h2 heading elements that have IDs.

<simple-toc></simple-toc>

If you include a [heading] attribute, its value will be used as the first item in the list.

<simple-toc heading="On this page..."></simple-toc>

The Web Component

customElements.define('simple-toc', class extends HTMLElement {

    /**
     * Instantiate the Web Component
     */
    constructor () {

        // Get parent class properties
        super();

        // Generate HTML
        let heading = this.getAttribute('heading');
        let navList = Array.from(document.querySelectorAll('h2')).map(function (heading) {
            if (!heading.id) return '';
            return `<li><a href="#${heading.id}">${heading.textContent}</a></li>`;
        }).join('');

        // Make sure a navList exists
        if (navList.length < 1) return;

        // Render the HTML
        this.innerHTML = `<ul>${heading ? `<li><strong>${heading}</strong></li>` : ''}${navList}</ul>`;

    }

});