Table of Contents Setup

Table of Contents (TOC) Setup

Setting up the Table of Contents in Webflow is a simple three-step process. Follow these steps within the Builder Tab to ensure your navigation is linked correctly to your content.

Step 1: Add the Outline

First, you need to place the TOC structure onto your page.

• In the Builder Tab, click to copy the Outline.

• Paste it directly into your Webflow Designer where you want the Table of Contents to appear.

Step 2: Organize Your Content

For the app to "read" your headings and generate links, your text must be placed inside the designated wrapper.

• Locate the fa-content-container element in your Navigator.

• Drag and drop all your text blocks, headings, and rich text elements inside this container.

[!IMPORTANT] The Table of Contents will only detect headings (H1-H6) that are nested within the fa-content-container.

Step 3: Verify Setup

Once your layout is organized, ensure everything is connected properly.

• Click the Verify Setup button in the app panel.

• The app will scan your designer and confirm if the setup is correct.

For better understanding, please refer to the visual guide provided below.