Notion Floating Table of Contents

Why this guide is still here

The Floating Table of Contents can now be turned on for your whole site in Options in the Super Dashboard, with no custom code. We are keeping this guide because the custom code below can be added to individual pages only. Use it when you want the Table of Contents on selected pages rather than across your entire site.

Super now includes a built-in Floating Table of Contents option, so you can add a floating Table of Contents to your site without using custom code.

This is useful for long pages where visitors need an easier way to move between sections. The Floating Table of Contents automatically uses the headings already added to your Notion page to create a floating navigation menu.

Use the built-in Floating Table of Contents

To enable the Floating Table of Contents:

1. Open your site in the Super Dashboard.
2. Open the Options section.
3. Find Floating Table of Contents.
4. Enable the option.
5. Save your changes.

Once enabled, the Floating Table of Contents will appear on pages with supported heading blocks.

Recommended Notion setup

For the best results, structure your Notion page using heading blocks.

Supported heading levels:

• Heading 1
• Heading 2
• Heading 3
• Heading 4

Try to use clear and short heading names. This makes the Floating Table of Contents easier to read and navigate.

The page should have at least 2 heading blocks. If the page has fewer than 2 headings, the Floating Table of Contents will not appear.

Note: The hint beside the Floating Table of Contents option is shown for demonstration purposes only.

Custom code alternative

Use the custom code below when you want the Floating Table of Contents only on selected pages, or when you need more control over its design. In that case, keep the built-in Floating Table of Contents option in Options turned off, otherwise it already appears on every page of your site.

The snippet detects the headings already added to the Notion page and turns them into a small floating navigation menu.

On desktop, visitors can hover over the floating control to open the Table of Contents. They can then click a heading to move directly to that section.

On mobile, the Table of Contents appears as a small floating button. Visitors can tap the button to open it, then select a heading. After a heading is selected, the menu closes automatically.

Installation instructions

1. Open your site in the Super Dashboard.
2. Open Pages and find the page where you want the Table of Contents.
3. Open that page's Code section. Code added there applies to this page only (see Understanding Page-Level vs Global Code in Super).
4. In the Head tab, paste the CSS snippet for the floating Table of Contents.
Copy

<link rel="stylesheet" href="https://sites.super.so/Floating-TOC/floating-v2.css">

5. In the Body tab, paste the JavaScript snippet for the floating Table of Contents.
Copy

<script src="https://sites.super.so/Floating-TOC/floating-v2.js"></script>

6. Save your changes.
7. Open the page on your live Super site and refresh it.
8. Repeat these steps for every other page where you want the Table of Contents.

Optional style customization

If you are using the custom code version, you can customize its appearance by adding these CSS variables to the CSS tab of the same page's Code section.

:root {
  --floating-toc-right: clamp(16px, 3.5vw, 64px);
  --floating-toc-panel-width: clamp(220px, 20vw, 292px);
  --floating-toc-panel-bg: #ffffff;
  --floating-toc-panel-radius: 14px;
  --floating-toc-active-color: #2f7de1;
  --floating-toc-active-bg: rgba(55, 53, 47, 0.08);
  --floating-toc-heading-highlight-bg: rgba(47, 125, 225, 0.14);
  --floating-toc-scroll-offset: 96px;
}

Adjust the scroll offset

If the page scrolls too high or too low after clicking a Table of Contents item, you can adjust the scroll offset.

:root {
  --floating-toc-scroll-offset: 96px;
}

Increase the value if the selected heading is hidden behind your navbar.

Custom code mobile behavior

When using the custom code version:

• On desktop, the Floating Table of Contents opens on hover.
• On mobile, it appears as a small floating button near the bottom-right corner of the screen. Visitors can tap the button to open the Table of Contents.
• The mobile layout is included in the CSS and starts at smaller screen sizes.

Notes and limitations

Built-in Floating Table of Contents

• The built-in Floating Table of Contents uses headings already rendered on the page.
• The page should have at least 2 supported heading blocks.
• Very long heading text may wrap inside the Table of Contents.
• Sites with custom navbars, sidebars, or other layout-related customizations may require additional testing.

Custom code version

• The custom code only works with headings already rendered on the page and does not create new headings or change your Notion content.
• If the page does not have supported heading blocks, the Table of Contents may not appear.
• Very long heading text may wrap inside the floating Table of Contents panel.
• Sites with custom navbars, sidebars, large page covers, or layout-related custom code may need extra testing for alignment.
• Sites with heavy third-party scripts or advanced custom code may need extra testing to make sure the Table of Contents loads correctly.

Troubleshooting

Built-in Floating Table of Contents is not appearing

• Make sure Floating Table of Contents is enabled in the Options section.
• Make sure the page has at least 2 supported heading blocks.
• Refresh the live site after enabling the option.

Custom code Floating Table of Contents is not appearing

• Make sure the page has supported heading blocks.
• Make sure the code was added in the Code section of this specific page.
• Check that the CSS snippet was added correctly in the Head tab.
• Check that the JavaScript snippet was added correctly in the Body tab.
• Refresh the live site and test again.

The Table of Contents does not scroll to the correct section

Refresh the live site and test again. If you are using the custom code version and the selected heading is hidden behind the navbar, increase the --floating-toc-scroll-offset value.

The design does not look correct

Check whether other custom CSS is overriding the Floating Table of Contents styles.

The issue only happens on one page

Test the feature on a simple page with a few headings to confirm whether the issue is related to the page structure or another custom code snippet.