> For the complete documentation index, see [llms.txt](https://docs.notionapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.notionapps.com/guides/add-a-table-of-contents-to-page-content.md).

# Add a Table of Contents to Page Content

Give long Notion pages a **desktop table of contents** so users can jump between headings without scrolling blindly.

This guide walks through enabling TOC preferences on a **Page Content** component, then checking desktop preview and the published app.

{% hint style="info" %}
**Scope (current release)**\
TOC layout preferences apply in **desktop preview** and on **desktop browsers**. On mobile, Contents still opens as a compact list. The feature is opt-in per Page Content component.
{% endhint %}

***

### What you get

After you enable the TOC and publish:

1. Desktop users see a headings list beside (or pinned with) the Page Content block
2. Clicking a heading scrolls to that section
3. Mobile users keep the existing compact Contents experience

You control:

* Whether the TOC is shown
* Whether headings stay pinned open
* Left vs right position
* How many headings are required before the TOC appears

***

### Before you start

You need:

* A screen that shows Notion page content (typically a **Details / View One Item** screen)
* A **Page Content** component on that screen
* Notion page content that includes headings (for example `#`, `##`, `###` blocks)
* Permission to **Publish** so end users see the change

{% hint style="warning" %}
**Heading count**\
If your page has fewer headings than **Minimum headings**, the TOC stays hidden even when enabled. Lower the minimum (default is often `2`) or add more headings in Notion.
{% endhint %}

***

### Step 1 — Open the Details screen

1. Open your application in the NotionApps builder.
2. Go to **Screens** (left rail).
3. Open the Details screen that shows the long page (or create a Details / View One Item screen and add **Page Content**).

![Open Screens and select the Details screen with page content](https://iili.io/Cjim6pp.png)

![Details screen open in the builder with mobile/desktop preview](https://iili.io/CjimiTN.png)

***

### Step 2 — Select the Page Content component

1. In the preview, click the **Page Content** block\
   **or**
2. In the right **Logic** list, expand/select **Page Content**.

The right panel should show Page Content settings, including **Page table of contents (desktop)**.

![Page Content selected with settings visible in the right panel](https://iili.io/CjimLQt.png)

***

### Step 3 — Enable the desktop table of contents

In **Page table of contents (desktop)**:

1. Turn **Show page table of contents** **On**.
2. Optionally turn **Pin open (always show headings)** **On** if you want headings always expanded (not collapsed behind a control).
3. Set **Position** to **Left** or **Right**.
4. Set **Minimum headings** (for example `2` or `3`).

{% hint style="success" %}
**Maker tip**\
Start with **Pin open** + **Right** for documentation-style pages. Use a higher minimum if short pages should stay TOC-free.
{% endhint %}

![TOC settings section on Page Content (desktop preferences)](https://iili.io/Cjimpaf.png)

***

### Step 4 — Preview on desktop width

1. Switch the builder preview to **Desktop** (not phone).
2. Confirm the preview is wide enough for the desktop TOC layout.
3. Check that:
   * Headings appear in the TOC
   * Clicking a heading scrolls the page content
   * Pin / position match your settings

![Desktop preview with page table of contents visible](https://iili.io/CjipJu2.png)

![Final desktop layout after TOC is enabled](https://iili.io/CjipFn9.png)

{% hint style="info" %}
**Mobile check**\
Flip back to phone preview. You should still get the compact Contents control — desktop TOC position/pin settings do not replace mobile Contents.
{% endhint %}

***

### Step 5 — Publish and verify live

1. Click **Publish** in the builder top bar.
2. Open the published app on a desktop browser.
3. Navigate to the screen with Page Content.
4. Confirm the TOC matches builder desktop preview.

***

### Settings reference

| Setting                     | What it does                                    | Typical choice         |
| --------------------------- | ----------------------------------------------- | ---------------------- |
| Show page table of contents | Master on/off for desktop TOC                   | On for long docs       |
| Pin open                    | Keep headings list always visible               | On for help/docs pages |
| Position                    | TOC on the left or right of content             | Right                  |
| Minimum headings            | Hide TOC until the page has at least N headings | `2` or `3`             |

***

### End-to-end example (makers)

**Goal:** A knowledge-base Details screen with a long Notion article should show a jump list of sections on desktop.

1. Open the Details screen that uses Page Content for the article.
2. Select **Page Content**.
3. Enable **Show page table of contents**.
4. Enable **Pin open**, set **Position** to **Right**, **Minimum headings** to `2`.
5. Preview on desktop, click a few headings.
6. **Publish** and spot-check the live app on desktop and phone.

***

### Checklist

* [ ] Page Content component selected (not a different block)
* [ ] **Show page table of contents** is On
* [ ] Pin / position / minimum headings set intentionally
* [ ] Desktop preview shows the TOC
* [ ] Phone preview still uses compact Contents
* [ ] App is **Published**
* [ ] Live desktop browser matches preview

***

### Troubleshooting

| Symptom                          | Likely cause                                | What to do                                    |
| -------------------------------- | ------------------------------------------- | --------------------------------------------- |
| TOC never appears                | Fewer headings than minimum, or feature Off | Lower **Minimum headings**; confirm toggle On |
| TOC only in builder, not live    | App not published                           | Publish again                                 |
| TOC missing on phone             | Expected                                    | Mobile uses compact Contents                  |
| TOC cramped / missing in preview | Preview too narrow                          | Widen desktop preview                         |
| Headings list empty              | Notion page has no heading blocks           | Add headings in Notion, then reload data      |

***

### Related notes for makers

* TOC preferences are stored on the **Page Content** component — each Page Content block can differ.
* Reloading Notion data may change heading titles if the page was edited.
* Visibility logic on Page Content still applies; a hidden Page Content block also hides its TOC.