AEM - Table of Content Component | AEM Community Blog Seeding

[kautuk_sahni]

AEM - Table of Content Component by Adobe

Abstract

Component that renders a table of content to help navigating the page content.

The implementation of this feature is tracked by issue #1816.
For discussing this spec, please use the discussion thread #1822.

User Story
As an author, I want to insert a table of content to my page, so that visitors can easily navigate to the titles that are within the page.

Requirements
Lists all H1-H6 elements that are rendered on the page, regardless of which component renders them (core title or teaser components, custom components, RTE, etc).
Lists also those titles that are coming from the page template or from (nested) experience fragments.
Links to the corresponding component on the page by using the id attribute that is set on the closest parent from the title element.
Creates a nested list of the titles found on the page, rendering them either with UL/LI or OL/LI elements.
Authoring capabilities:
Capability to choose how to render the list (unordered list - the default, or ordered list).
Capability to restrict the start level (default being 1) and the end level (default being 6) of the titles listed.
Capability to restrict which title elements are to be listed based on their CSS class names, or of the class name of the elements containing them.
The component must not impact page speed in any substantial ways:
It must not rely on JavaScript that might slow down the page in any way.
It must avoid any cumulative layout shifts that could be introduced by client-side rendering.
It must not slow down the first byte sent to the browser.
Any HTML rewriter must not block the output, or at least not until the placeholder of the TOC component is reached on the page.
Known Limitations
At least in the initial version, container components like Carousel, Tabs and Accordion will not yet be able to automatically navigate to the title items that they might contain when the visitor wants to navigate to them.

Read Full Blog

AEM - Table of Content Component

Q&A

Please use this thread to ask the related questions.