Table of Contents Element

Content Controls

Table

These controls let you manage and customize the table of contents, adjusting headings visibility and applying advanced selector settings for refined content presentation.

  • Title – Define a custom title for your table of contents.
  • Included Headings – Choose which heading levels (H1-H6) to include in your table.
      • H1 – Toggle to include or exclude H1 headings in the table.
      • H2 – Decide whether to show or hide H2 headings in the table.

  • Advanced – Apply advanced settings to fine-tune how your table fetches and displays content.
    • Ignore Selectors – Specify CSS selectors to ignore sections or elements when generating the table.
    • Container Selector – Identify the CSS selector for the container that holds the content to be tabulated.

Design Controls

Container

Modify the appearance and layout of the container holding the table of contents, adjusting width, alignment, background, and other stylistic attributes.

    • Width – Set the width of the table’s container.
    • Content Alignment – Align the table content within the container (e.g., left, center, right).
    • Background – Choose a background color for the table’s container.

Header

Control the display, style, and layout of the header in the table of contents, with options for typography, padding, and accordion features.

    • Disable – Toggle to enable or disable the header.
    • Background – Set a background color for the header.

  • Icon – Customize the icon settings for accordion-style headers (Note: this control is available only when the accordion is enabled).
      • Icon – Select an icon to represent collapsed headers.

List

Adjust settings related to the list items in the table of contents, defining how items are displayed, styled, and spaced for optimized readability.

    • Scroll Offset – Determine the scroll offset to ensure headings are visible when linked from the table.

Spacing

Define the spacing around and within the table of contents, ensuring it integrates seamlessly into your page layout without crowding content.

    • Below Header – Specify the amount of space beneath the header.