00:00
Buy Me a Beer
For the Blog

Table of Contents

Magically generate a gorgeous table of contents for your articles using the heading tags within the rich text block. It can be used on CMS Template or Static pages.

How to Create a Table of Contents in Webflow

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Add Table of Contents Attribute

Copy this attribute:

vdx-toc-article

Add a Rich Text to your page, and past the attribute vdx-toc-articleto the Name input of a Custom Attributes.

Add a Text Link or Link Block inside each List Item.

List
List Item
Link Block
Text Link
List Item
Link Block
Text Link
List Item
Link Block
Text Link
Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Link

Bold text

Emphasis

Superscript

Subscript

Rich Text
Style
Settings
Interactions
Rich Text Settings
Custom Attributes
Name
vdx-toc-article
Value

Add Table of Contents List Attribute

Copy this attribute:

vdx-toc-list

Add a List to your page, and past the attribute vdx-toc-listto the Name input of a Custom Attributes

List
List Item
Link Block
Text Link
List Item
Link Block
Text Link
List Item
Link Block
Text Link
Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Link

Bold text

Emphasis

Superscript

Subscript

List
Style
Settings
Interactions
List Settings
Custom Attributes
Name
vdx-toc-list
Value

Add H1 Attribute

Copy this attribute:

vdx-toc-h1

Paste attribute into the Name input of a List Item Custom Attributes .

List
List Item
Link Block
Text Link
List Item
Link Block
Text Link
List Item
Link Block
Text Link
Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Link

Bold text

Emphasis

Superscript

Subscript

List Item
Style
Settings
Interactions
List Item Settings
Custom Attributes
Name
vdx-toc-h1
Value

Add H2 Attributes

Copy this attribute:

vdx-toc-h2

Paste attribute into the Name input of a List Item Custom Attributes .

List
List Item
Link Block
Text Link
List Item
Link Block
Text Link
List Item
Link Block
Text Link
Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Link

Bold text

Emphasis

Superscript

Subscript

List Item
Style
Settings
Interactions
List Item Settings
Custom Attributes
Name
vdx-toc-h2
Value

Add H3 Attributes

Copy this attribute:

vdx-toc-h3

Paste attribute into the Name input of a List Item Custom Attributes .

List
List Item
Link Block
Text Link
List Item
Link Block
Text Link
List Item
Link Block
Text Link
Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Link

Bold text

Emphasis

Superscript

Subscript

List Item
Style
Settings
Interactions
List Item Settings
Custom Attributes
Name
vdx-toc-h3
Value

Style List Items and Link Blocks

Style each List Item and/or Link. These styles will be duplicate and added to the Heading Attributes List Items and Links.

List
H1 List Item
H1 Link Block
Text Link
H2 List Item
H2 Link Block
Text Link
H2 List Item
H3 Link Block
Text Link
H1 List Item
H2 List Item
H3 List Item
H1 List Item
Style
Settings
Interactions
Style Selector
H1 List Item
Backgrounds
Image & Gradient
Color
#888680
H2 List Item
Style
Settings
Interactions
Style Selector
H2 List Item
Backgrounds
Image & Gradient
Color
#888680
H3 List Item
Style
Settings
Interactions
Style Selector
H3 List Item
Backgrounds
Image & Gradient
Color
#888680
List
H1 List Item
H1 Link Block
Text Link
H2 List Item
H2 Link Block
Text Link
H2 List Item
H3 Link Block
Text Link
Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Link

Bold text

Emphasis

Superscript

Subscript

H1 Link Block
H2 Link Block
H3 Link Block
H1 Link Block
Style
Settings
Interactions
Style Selector
H1 Link Block
Font
Size
20px
Height
1.4
H2 Link Block
Style
Settings
Interactions
Style Selector
H2 Link Block
Font
Size
16px
Height
1.4
H3 Link Block
Style
Settings
Interactions
Style Selector
H3 Link Block
Font
Size
14px
Height
1.4

Add Top Offset to the Headings

In the Rich Text give the attribute vdx-toc-article a CSS value. e.g, by adding 8rem, when anchor scrolled, the page will scroll to 8rem above the Heading.

List
List Item
Link Block
Text Link
List Item
Link Block
Text Link
List Item
Link Block
Text Link
Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Link

Bold text

Emphasis

Superscript

Subscript

Rich Text
Style
Settings
Interactions
Rich Text Settings
Custom Attributes
Name
vdx-toc-article
Value
10rem
  1. Text Link
  2. Text Link
  3. Text Link