AttRibutes
Table of Content
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Table of Contents

Automatically create a table of contents for a Rich Text Block in Webflow

Watch a quick tutorial

Table of Contents • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Contents

Add to Rich Text element

fs-toc-element
=
"
contents
"

Link

Add to a link element

fs-toc-element
=
"
link
"

Interactions trigger

Div inside a H# wrapper

fs-toc-element
=
"
ix-trigger
"

Optional attributes

Offset Top

Add to an element with fs-toc-element = "contents"

fs-toc-offsettop
=
"
{ CSS_VALUE }
"

Offset Bottom

Add to an element with fs-toc-element = "contents"

fs-toc-offsetbottom
=
"
{ CSS_VALUE }
"

Hide URL Hash

Add to an element with fs-toc-element = "contents"

fs-toc-hideurlhash
=
"
true
"

Special Directive: Omit Heading

Add inside of plain text before the Heading text

[fs-toc-omit]
Copy text string

Special Directive: Change H#

Add inside of plain text before the Heading text

[fs-toc-h4]
Copy text string

Table

Add to Div

VALUE
Copy value
fs-toc-element
=
"
table
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-toc
></script>

Copy Script
2

Add these required attributes to the elements

Contents

A TOC will be created depending on this element's content
fs-toc-element
=
"
contents
"

Apply this attribute to the wrapper containing the page's contents, such as a native Rich Text Block or a Div Block with nested Heading elements. The table of contents will be generated from these Heading elements.

  • Applied on a Rich Text Element
    Attributes will list the heading elements of he Rich Text Element inside of the table of contents
  • Applied on a Div Block
    Attributes will list all single heading elements nested in this div inside of the table of contents
Add this attribute:
Name
fs-toc-element
Copy
Value
contents
Copy
Add it to those type(s) of element(s):
Rich Text
Div Block
IMPORTANT

When applying this attribute to a Div Block, the Solution will only list single heading elements. It will ignore heading elements inside of Rich Text Elements. This solution cannot be used to generate a single table of contents based on several Rich Text Elements.

IMPORTANT

Using the Div Block method will slightly remodel the HTML code of your page. It will group each heading with its following content, with an ID representing the heading text. This can affect your layout, depending on the Display properties you've set on the div.

<div class="mydiv" fs-toc-element="contents">

   <div id="The first heading">...</div>

   <div id="The second heading">...</div>

   <div id="The third heading">...</div>

</div>

NOTE

For multiple Rich Text blocks with multiple TOC, use Instances. Check the last Option on this page.

Link

A TOC will be created depending on this element's content
fs-toc-element
=
"
link
"

Attach this attribute to a link that will act as the navigation for the table of contents, which is generated based on headings from H2 to H6.

If you're incorporating a Link Block with multiple nested elements:

You can nest multiple elements within a generated Link Block, such as an icon and text within a Link Block. When using multiple elements, add fs-toc-element = "link" directly to the text element. The attributes will treat the parent Link Block as the template.

Add this attribute:
Name
fs-toc-element
Copy
Value
link
Copy
Add it to those type(s) of element(s):
Link Block
Text Link
Text Block
IMPORTANT

All table of contents implementations must begin with the H2 element. It's not possible to start the table of contents with any heading level other than H2, such as H1 or H3.

EXAMPLE

It's not necessary to include all heading levels from H2 to H6 in the generated list. The Attributes Table of Contents solution will create a table of contents with as many nested heading levels as you specify.

For instance, if you want to display only H2 and H3 headings in the table of contents, you should place two levels of nested link elements.

3

Update the structure of the Table of Contents

Wrap heading links in div block elements

Each Heading link template must be enclosed in a div wrapper, and this div wrapper should be a child of the div associated with the preceding Heading level. Please replicate the structure below:

3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Interactions Trigger

A TOC will be created depending on this element's content
fs-toc-element
=
"
ix-trigger
"

Add a Mouse click (tap) Webflow Interaction to this Div Block.

The "On 1st click" action is activated when a link is in its "Current" state. The "On 2nd click" action occurs when a link is inactive.

Add this attribute:
Name
fs-toc-element
Copy
Value
ix-trigger
Copy
Add it to those type(s) of element(s):
Div inside a H# wrapper
EXAMPLE

Each ix-trigger is specific to its Heading (H#) wrapper. For instance, if the ix-trigger Div Block is positioned within the wrapper for H3 links, the Webflow Interaction will only apply to H3 links.

This allows for the creation of distinct interactions for each set of generated Heading links. To apply the same Webflow Interaction across different headings, place the ix-trigger Div Block inside the wrapper for each Heading (H#).

div block icon

Table

Specifies the wrapper element that contains all the links for the table of contents.
fs-toc-element
=
"
table
"

This feature is beneficial for creating table of contents links in a location different from where the link templates are defined.

If needed, apply this attribute to a Div Block where the table of contents should appear.

Add this attribute:
Name
fs-toc-element
Copy
Value
table
Copy
Add it to those type(s) of element(s):
Div Block
NOTE

Without this attribute, the system defaults to using the first parent wrapper of the link template elements as the table's location. Typically, the "H2 div wrapper's" first parent acts as the table, which is the recommended default setup.

Optional

Add more

options

Current/Active state

Highlight the link in view

The "Current" state of generated table of contents links is compatible with Webflow's native "Current" state functionality.

No attributes required.
EXAMPLE

To modify the "Current" state class in the Webflow Designer:

  • Look for the green "Current" class indicator in the Styles panel.
  • Apply the desired current/active styles to the link. These styles will be active when the link is highlighted as the user scrolls through the table of contents.
  • Choose one of the link templates (fs-toc-element = "link").
  • Set the link's URL to the current page's URL.

Offset Top

Adds a space on top of the current link target
fs-toc-offsettop
=
"
{ CSS_VALUE }
"

When a user clicks a link in the table of contents, the page will smoothly scroll to the corresponding section of the content. This attributes allows you to control the space between the top of the viewport and the anchor.

EXAMPLE

Adding the attribute fs-toc-offsettop = "8rem" creates 8rem of space above the Heading, initiating the "Current" state there. Thus, when anchor scrolling is triggered, the page will scroll to a point 8rem above the targeted Heading.

Add this attribute:
Name
fs-toc-offsettop
Copy
Value
{ CSS_VALUE }
Copy
Example:
fs-toc-offsettop = "2rem"
Add it to any element with
fs-toc-element = "contents"
script icon
Script tag
?

Offset Bottom

Adds a space at the bottom of the current link target
fs-toc-offsetbottom
=
"
{ CSS_VALUE }
"

When a user clicks on a link in the table of contents, the page will anchor scroll to the specified content section.

EXAMPLE

Using the attribute fs-toc-offsetbottom = "4rem" adds 4rem of space below the Heading, marking the point where the "Current" state begins.

Add this attribute:
Name
fs-toc-offsetbottom
Copy
Value
{ CSS_VALUE }
Copy
Example:
fs-toc-offsetbottom = "2rem"
Add it to any element with
fs-toc-element = "contents"
script icon
Script tag
?

Hide URL Hash

Removes anchor links at the end of the page URL
fs-toc-hideurlhash
=
"
true
"

To prevent the URL hash from appearing while navigating through the table of contents, add this attribute. Normally, clicking through the table of contents adds the ID of the Heading to the URL by default, such as in "https://finsweet.com/attributes/table-of-contents#the-best-part-about-h2-elements".

Setting this attribute to true removes the hash in the URL during navigation. It's important to note that this does not remove the ID from the Heading itself; it merely conceals the hash from the URL. The default setting for this feature is false.

‍

Add this attribute:
Name
fs-toc-hideurlhash
Copy
Value
true
Copy
Add it to any element with
fs-toc-element = "contents"
script icon
Script tag
?

Special Directive: Omit Heading

Omit a defined heading from the TOC
[fs-toc-omit]

To exclude a specific Heading from being included in the table of contents, insert [fs-toc-omit] in plain text before the Heading text. This Heading will not be added to the table of contents.

Add this text string:
Name
[fs-toc-omit]
Copy text string
Where to add:
Add inside of the plain text just before the Heading text.
EXAMPLE

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.

Special Directive: Change H#

Change a Heading level
[fs-toc-H#]

To adjust the Heading level (H#) of a specific Heading for the table of contents, while maintaining a different Heading level in the actual content, place [fs-toc-h#] in plain text before the Heading text.

This notation will change the Heading's level specifically for its appearance in the table of contents links.

Add this text string:
Name
[fs-toc-H#]
Copy text string
Example:
[fs-toc-H4]
Where to add:
Add inside of the plain text just before the Heading text.
EXAMPLE

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.

Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-toc-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-toc-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-toc-instance = "1"
fs-toc-instance = "2"
fs-toc-instance = "blog"
fs-toc-instance = "team"
Learn more ways to set up multiple instances and how it works

Still need help?

Get Support