Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Intermediate

Table of Contents

Table of Contents· Demo

Settings controls

Smooth scroll: if enabled, smooth scroll behavior will be included at your site. This means, to reproduce a smooth scroll when clicking an anchor redirecting to the same page. More info here.
Content selector: determines the element from where the table of contents will get it’s heading selectors.
Heading selector: determines the tag of the elements that will be included at Table of contents. You can also set ids and class selectors, and combine them all by separating with commas. e.g: h2, #my-heading, .toc-heading
Ignore selector: if there is an element that mees the conditions at the Heading selector but it shouldn’t be included at Table of contents then you can select it here by it’s tag, id or class.
Scroll toggle: determines when the next heading will be toggled at Table of contents when it comes into view: from center or from top.
Offset: determines the heading’s top distance to leave when clicking on an anchor at the table of contents.

Outline controls

There is an outline animation at the Headings when clicking their anchor at Table of contents. It’s styles and animation duration can be customized at this section.

Style controls

Table of contents styles can be customized at this section.
Sticky: if enabled, Table of contents will become sticky. You will have to set a relative position at the parent it has to stick to.
Top: determines Sticky top distance. Requires Sticky to be enabled.

Targets style controls

Table of contents anchors styles can be customized at this section. Each anchor has a left outline when it’s target is active (selected line). It can be also styled here.

Responsive controls

If Responsive is enabled, Table of contents will collapse at the media breakpoint selected, converting into a dropdown.
The dropdown will have 3 animations: arrow, dropdown and text swap animations. Their properties, animation duration and easing can be customized at pleasure.

– Tamu

On this page