Table of Contents

• Support for 2 levels of links
• Customizable selectors (up to 2)
• Customizable active class
• Custom offset so that your navbar doesn't cover the clicked heading

• Content [s-toc="content"]
• List [s-toc="list"]
  • List item
    • Link
      • Text [s-toc="text"]
    • List (optional)
      • List item (optional)
        • Link
          • Text [s-toc="text"]

Main Attributes:

s-toc = content - The content wrapper that you want the links to be generated from.

s-toc = list - The list element that will include the main links.

s-toc = text - The text element inside the list item that will get replaced with the heading text.

‍

Options (add to the list element):

s-toc-offset - The distance between heading and top of your screen when you click one of the links. Can be any CSS unit. Default: 80px.

s-toc-active - The class that will be added to active links. Default: s-active

s-custom-selector - Which heading tags to look for (max. 2). Default: h2,h3

‍

Setup:

1. Add the s-toc="content" attribute to the div or rich text element that contains your content

2. Add the s-toc="list" attribute to the list element that will have all the links. This is also where you can add the options attributes. Inside the list element, add one list item.
3. Inside the list item, add a link block, and inside the link block, add a text block. Add the s-toc-"text" attribute to the text block
4. (Optional) If you want 2 levels of links, add another list element inside the first list item, and add one list item in it, with the same setup as the first list.

You can also add your active classes on the items and Socks UI will remove them for you if needed.

‍

It should look like this: