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.

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.

---

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

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.

---

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

Details screen open in the builder with mobile/desktop preview

---

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

---

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

Maker tip Start with Pin open + Right for documentation-style pages. Use a higher minimum if short pages should stay TOC-free.

TOC settings section on Page Content (desktop preferences)

---

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

Final desktop layout after TOC is enabled

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.

---

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.

Builder options at a glance

This guide teaches a focused maker workflow. For the full screen option inventory (What it does / How to use / Why) and annotated builder screenshots, use the matching Types of Screens guide:

• Data screens: List (View Items), Details, Form (Add Item), Form (Update One Item), List (Update Items), Content

• Everyday chrome / Queue & activity: see the Types of Screens index

• Automation native screens: Native Automation Screens

Recommended defaults

• Change one option family at a time, then publish and test on phone and desktop.

• Prefer screen-level settings in Content / Behaviour / Appearance before custom CSS/JS.

• Keep public access and navigation visibility intentional on every screen you link from this guide.