Pagekit Table Of Contents Extension

Provide your users a better overview of your contents. This extension adds a table of contents to your pages.

You are free to define numerous options including adding your own CSS.

How To Use


Using this extension is very easy. Just install it from Pagekit's marketplace.


After enabling the extension, click on "Table Of Contents" in the extension's overview.

TOC settings

Now you may choose, if you want the Table Of Contents to be inserted automatically. If you choose to do so, please choose, on which pages the TOC should be inserted. For example, it is used to show a list of brokers at

Using this method the TOC is always added to the content of the page.

Table Of Contents

You can also choose to use the TOC as a widget. In this case you uncheck the checkbox titled Insert TOC automatically and switch over to Sites > Widgets.

Important: If you are using the auto-insert-mode, you can not use the widget on the same page.

Configuration details:

  • Widget mode: The widget form contains all parameters you are able to set.
  • Global mode: Click on Show Details to get a list of all parameters you are able to set.


  • Custom CSS: Add your own CSS, which is only added to your view, if a TOC is used.
  • Custom JS: Add your own JS, which is only added to your view, if a TOC is used.
  • TOC Class: Attach a class to the table of contents
  • Content Selector: Choose, which parts of the page can be considered as article content. This prevents other headings (e.g. Widget-Headings) from being added to the TOC.
  • Ignore Selector: Headings, that are matching this selector are excluded from the TOC.
  • Smooth Scroll: Enable/Disable smooth scrolling
  • Smooth Scroll Duration: Smooth Scroll duration in ms
  • Link Class: Attaches a class to a TOC link
  • Active Link Class: Attaches a class to the active link in the TOC
  • List Class: Attaches a class to the TOC list
  • List Item Class: Attaches a class to the TOC list elements
  • Collapsible Class: Attaches a class to items, that are collapsible
  • Collapsed Class: Attaches a class to collapsed items
  • Collapse Depth: Defines the number of heading levels that should be collapsed
  • Throttle Timeout: Timeout between events
  • Heading Offset: Defines the offset between the top of the document and the headings
  • Position Fixed Selector: Choose the element you want to add a sticky-class to
  • Position Fixed Class: Class to define a fixed position
  • Fixed Sidebar Offset: Define sidebar offset
  • Heading Selectors: Choose, which headings (h1, h2, h3, ...) should be added to the TOC

Our sponsors

Support our project by becoming a sponsor today.