Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Create TOC with multiple level


Level 1

how can I create table of content of a page which has H2, H3,, H4.


I want al heading level to appear in TOC.

1 Reply


Community Advisor

There are many ways to implement your required, but here's what you can try. 

  1. Create a section-container component (sling:superResourceType parsys or responsive-grid).
  2. The section-container will allow dialogue configurations to include a title & title header level.
  3. The section-container allows content components be added in its content body.
  4. Create a TOC component;
  5. The TOC component with one to one relationship with a Sling Model.
  6. The TOC component will have logic to search for all section-container components configured on the page and display the title & title header level properties.
  7. Complete.

The page will only be constructed with the section-container component. While the TOC component sites on top of the section-container component.

JCR View: