How to add an attribute:

close icon
Hey! Give us some feedback here.

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.

Table of Contents
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

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.

navigator arrow
Contents
I want the Headings of this
richtext icon

Rich Text or Div Block

element to generate a table of contents
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-toc-element
copy icon
Value
contents
copy icon
Check live example here
Add this attribute on the wrapper that holds the contents of the page. This can be a native Rich Text Block or a Div Block with nested Heading elements.

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.
how to add cms filter list attribute
navigator arrow
Link
I want this

Link Block, Link Text, or Text Block

to be the template for the generated table of contents links
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-toc-element
copy icon
Value
link
copy icon
Add this attribute to a link that will serve as the table of contents links. These links are generated based on H2-H6.

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.
how to add cms filter list attribute
It is required that each Heading link template has a div wrapper and that div wrapper is a child of the previous Heading number.
The visual below represents the required structure in Webflow Designer:
how to add cms filter list attribute
navigator arrow
Current/Active state
I want a "Current" state for generated link elements
See how it works
see webflow attributes
No attributes required.

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
how to add cms filter list attribute
navigator arrow
Interactions Trigger
I want to trigger Webflow interactions when a link is "Current"
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-toc-element
copy icon
Value
ix-trigger
copy icon
Add this attribute to a Div Block inside a "H# div wrapper".

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.
how to add cms filter list attribute
navigator arrow
Option
Offset Top
See how it works
see webflow attributes
I want to add a top offset to the "Current" state of Heading sections
Add this attribute
Description
Name
fs-toc-offsettop
copy icon
Value
{ CSS_VALUE }
copy icon
Adds a top offset to the "Current" target of the Heading contents.

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.
Where?
Add to an element with fs-toc-element = "contents"
how to add cms filter list attribute
navigator arrow
Option
Offset Bottom
See how it works
see webflow attributes
I want to add a bottom offset to the "Current" state of Heading sections
Add this attribute
Description
Name
fs-toc-offsetbottom
copy icon
Value
{ CSS_VALUE }
copy icon
Adds a bottom offset to the "Current" target of the Heading contents.

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.
Where?
Add to an element with fs-toc-element = "contents"
navigator arrow
Option
Hide URL Hash
See how it works
see webflow attributes
I want to hide the url hash when navigating through the table of contents (/blog-post#heading-2-title)
Add this attribute
Description
Name
fs-toc-hideurlhash
copy icon
Value
true
copy icon
Add this attribute to hide the url hash from showing while navigating through the table of contents. When clicking through the table of contents, the ID of the Heading will be added to the URL by default.

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.
Where?
Add to an element with fs-toc-element = "contents"
navigator arrow
Special Directive
Omit Heading
See how it works
see webflow attributes
I want to omit a specific Heading from the generated table of contents
Omits (or ignores) a specific Heading instance from being generated in the table of contents.

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.

navigator arrow
Special Directive
Change H#
See how it works
see webflow attributes
I want to change a specific Heading from one H# to different H# when adding the Heading to the table of contents
Changes a H# when a the Heading needs to be a specific H# in the contents and a different H# when generated in the table of contents links.

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.

navigator arrow
table
Optional. Define the
div block icon

Div Block

element that holds all table of contents links
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-toc-element
copy icon
Value
table
copy icon
Optionally defines the wrapper element that holds all table of contents links.

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)

Working examples

See this solution working live in this Webflow project.

Example 1
Table of Contents

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.

Copy and paste this example directly on Webflow
copy icon
Copy this example

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.