Content Controls
Table
This section of controls is designed to help you set up and configure the Table of Contents on your page. You can set a title for your table, choose which headings should be included, and use advanced settings to refine how the table of contents interacts with other elements on your page.
- Title – Set a specific title for your table of contents.
- Included Headings – Decide which heading levels (H1 to H6) should be included in your table of contents. Each heading level can be toggled on or off.
- Advanced – Access advanced settings for even more control over your table of contents.
- Ignore Selectors – Specify any selectors that should be ignored by the table of contents. Default class is
.toc-ignore
- Container Selector – Define a specific container selector for the table of contents.
Design Controls
Container
This section lets you customize the appearance of the table of contents container. Adjust the width, alignment, and background color; add padding and borders; and apply a shadow effect for a more polished look.
- Width – Adjust the width of the table of contents container.
- Content Alignment – Align the contents of the container.
- Background – Set the background color of the container.
- Padding – Add padding inside the container for better spacing.
- Padding – Adjust the padding values for all sides of the container.
- Borders – Add and customize borders for the container.
- Radius – Set the border radius to round the container’s corners.
- Styling – Choose a style for your borders and adjust their width and color.
- Shadow – Add a shadow effect to the container for a sense of depth.
Header
The header section allows you to tweak the appearance and functionality of the table of contents’ header. You can disable the header, change its background color, adjust typography, add padding, and enable an accordion effect with customizable icons.
- Disable – Toggle to enable or disable the table of contents’ header.
- Background – Change the background color of the header.
- Typography – Customize the typography settings for the header text.
- Padding – Add padding to the header for better spacing.
- Padding – Adjust the padding values for all sides of the header.
- Accordion – Toggle to enable or disable the accordion effect for the header.
- Icon – Customize the icons used in the accordion header (this option is available only when the accordion effect is enabled).
- Icon – Choose a default icon for the accordion headers.
- Active Icon – Choose a different icon to display when an accordion header is active/open.
- Size – Adjust the size of the accordion icons.
- Color – Change the color of the accordion icons.
List
This section offers a variety of settings to modify the appearance and behavior of the list items in your table of contents. You can set a scroll offset, choose a collapse behavior, select a style, customize the appearance indicating active sections, adjust indentation, manage spacing between items, and tweak typography settings for regular and active list items.
- Scroll Offset – Set an offset for scroll positions to ensure the correct section is highlighted.
- Collapse – Toggle to enable or disable collapse behavior for the list items.
- Style – Choose a style for the list items in your table of contents.
- Bar – Customize the appearance of the active section indicator bar.
- Background – Set the background color of the indicator bar.
- Active – Choose a color for the indicator bar when a section is active.
- Width – Adjust the width of the indicator bar.
- Indent – Adjust the indentation of the list items for better visual hierarchy.
- Between Items – Set the space between individual list items.
- Typography – Customize the typography settings for the list items.
- Active Typography – Customize the typography settings specifically for active list items.
- Color – Change the text color of active list items.
- Weight – Adjust the font weight of active list items.
- Size – Change the font size of active list items.
Spacing
Adjust the spacing around the table of contents with these controls. You can add space below the header and configure the wrapper’s margins for better positioning and layout integration. The wrapper margin controls are available only when a specific condition is met.
- Below Header – Add space directly below the table of contents’ header.
- Wrapper – Adjust the margins of the table of contents wrapper (this control is only available when a specific condition regarding the container’s sticky position is met).
- Margin Top – Add space above the wrapper for better positioning.
- Margin Bottom – Add space below the wrapper to prevent content overlap.
