🎯 Purpose
Automatically generates a clickable list of internal links based on the headings within your page or post. It enhances navigation, readability, and user experience—especially useful for long-form content.
➕ How to Add & Configure
Insert Widget
Drag and drop the Table of Contents widget into your desired position in the layout.Default Setup
The widget scans for headings (H1–H6) and auto-generates a structured list of internal anchor links.Customize Title
Set a custom heading above the list and choose the HTML tag (H2–H6 or div).Select Which Headings to Include
Tags: Choose which heading levels (e.g., H2 and H3) to include.
Container: Limit the scan to a specific section or container, if needed.
Exclude Specific Elements
Use CSS selectors to omit headings or areas you don’t want included (e.g., by adding a specific class).
📐 Display Options
Marker Style: Choose numbered or bulleted list styles; if using bullets, select an icon.
Word Wrap: Wrap long text within TOC items for clarity.
Minimize/Expand Box: Allow the TOC box to be collapsed, with configurable expand/collapse icons.
Responsive Minimize: Choose devices (desktop/tablet/mobile) where the TOC starts collapsed.
Hierarchical View: Indent items based on heading levels; can optionally collapse sub-items when nested.
🎨 Styling Controls
Box Styles
Set background color, border style, width, radius, and shadow.
Configure internal padding and minimum height.
Header Styling
Align header text (start/center/end), style typography and color, and color for collapse/expand icons.
List Styling
Adjust list container max-height and overall text typography.
Set indentation for nested items, as well as text color (normal, hover, active).
Optionally underline list items on hover.
Customize marker (bullet/number) appearance: color and size.
🛠️ Advanced Usage & Tips
Ensure a container is selected if you want the TOC to apply only to part of the content (e.g., a blog post within a template).
Use CSS selectors or classes on headings to exclude them from the TOC.
Enable hierarchical structure and optional collapse when space is limited.
For very long content, allow readers to minimize the TOC and expand it as needed.
Fit the TOC within responsive layouts—configure minimize settings based on device type.
✅ Best Practices
Ideal for long tutorials, guides, or documentation pages to improve navigation.
Use specific heading levels to keep the TOC concise and focused.
Hide non-content headings (like widget titles) via classes to keep the list clean.
Use responsive behavior to customize the presence and display on different screen sizes.
Style marker and indent settings to visually match your site’s design.
The Table of Contents widget helps streamline navigation and create a polished, user-friendly layout—automatically organizing headings into a styled, interactive list.
