Table of Contents
Automatically generate a table of contents based on heading tags inside a Rich Text Block. Works with CMS, static, Webflow "Current" class, and native anchor scroll.
.png)
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Rich Text or Div Block
Table of contents is generated based on Heading elements.
Use instances for multiple Rich Text blocks. For example, create a table of contents from 3 stacked Rich Text blocks. Use "contents", "contents-2", and "contents-3" with "link", "link-2", and "link-3". This strategy can make three Rich Text blocks appear as one table of contents component.
Use a Div Block to nest multiple Heading elements. Attributes will generate a table of contents based on all Headings found inside the fs-toc-element = "contents" Div Block.
Link Block, Link Text, or Text Block
It is required all table of contents implementations start with the H2 element. It is not possible to start the table of content links with any other Heading number, like H1 or H3.
It is not required to use all H2-H6 Headings for the generated list. The Attributes Table of Contents solution will create as many nested Heading levels as specified.
For example, if to only show H2 and H3 elements in the table of contents, place two levels of nested link elements.
Support for Link Block with multiple nested elements:
It is possible to nest multiple elements inside of a generated Link Block. For example, an icon and text wrapped inside of a Link Block. When using multiple elements, add fs-toc-element = "link" directly to the text element. Attributes will use the parent Link Block as the template.
The visual below represents the required structure in Webflow Designer:
The Current state of generated table of contents links integrates with Webflow's native Current state.
To edit the Current state class inside Webflow Designer:
- See the green "Current" class appear in the Styles panel
- Apply the current/active styles for the link. These styles will be used when a link is active while scrolling through the table of contents.
- Select one of the link templates ( fs-toc-element = "link" )
- Set the url of the link to the page you are on
Add a Mouse click (tap) Webflow Interaction to this Div Block.
The "On 1st click" will be triggered when a link is Current. The "On 2nd click" will be triggered when a link is not active.
Each ix-trigger is unique to its H# wrapper. For example, if the ix-trigger Div Block is placed inside the H3 links wrapper, the Webflow Interaction will only affect H3 links. This gives you to the power to create a unique interaction for each generated Heading link. To use the same Webflow Interaction, place the ix-trigger Div Block inside each H# wrapper.
When a user clicks a table of contents link, the page will anchor scroll to that section of the contents. This attribute adds an offset on the top of the of the Heading's content.
For example, adding fs-toc-offsettop = "8rem" will add 8rem of space above the Heading where the "Current" state is initiated. When anchor scrolled, the page will scroll to 8rem above the Heading.
When a user clicks a table of contents link, the page will anchor scroll to that section of the contents. This attribute adds an offset on the bottom of the of the Heading's content.
For example, adding fs-toc-offsetbottom = "4rem" will add 4rem of space below the Heading where the "Current" state is initiated.
For example, https://finsweet.com/attributes/table-of-contents#the-best-part about-h2-elements
Default is false.
This option does not remove the ID from the Heading. It only hides the hash from the url.
Add [fs-toc-omit] in plain text before the Heading text. This text will be not added to the table contents.
I want this H3 to show in the table of contents
This H3 will show as normal in the generated table of contents.
[fs-toc-omit]I do not want this H3 to show in the table of contents
Adding this directive will omit (or hide) the Heading from the generated table of contents.
Add [fs-toc-h#] in plain text before the Heading text. This text will change its H# for the table of contents.
I want this H3 to show as an H3 in the table of contents
This H3 will show as normal in the generated table of contents.
[fs-toc-h4]This H3 will show as an H4 in the table of contents
Adding this directive will change Heading for the generated table of contents.
Useful for generating table of contents links in a different location than the defined link templates.
If required, set this attribute on a Div Block where the table should be generated.
If this attribute is not added to the implementation, Attributes will use the first parent wrapper of the link template elements. The first parent of the "H2 div wrapper" will be the table. This is the recommended default.
- This is the table by default
- H2 div wrapper
- fs-toc-element="link" (for H2)
- H3 div wrapper
- fs-toc-element="link" (for H3)
You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.
Example of this solution:
Working examples
See this solution working live in this Webflow project.
This is the H1 title
H1 titles are ignored in the table of contents. We always start the table of contents links with H2.
The best part about H2 elements
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
H3 is one number lower than H2
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
I'm an H4 chilling under an H3
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
And now back to H2
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
H3 is one number lower than H2
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
I'm an H4 chilling under an H3
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
H5 is very rare
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
and H6 is a unicorn!
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Another H2 here
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
H3 is one number lower than H2
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
I'm an H4 chilling under an H3
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Frequently Asked Questions
Everything you need to know about this attributes solution.
Give your sidebar a defined height, this will allow you to scroll up or down.
Developer documentation
Next time implement inside Webflow
