# 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.

<figure><img src="https://3020946583-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJm5r0dhtIBI391RqvPS2%2Fuploads%2FJbtMrEvjkEJhjTEpqvzY%2FRecording2025-12-22165430-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=5c8d6d1e-e5b6-4520-805d-e2b75b27a298" alt=""><figcaption></figcaption></figure>