Notion Floating Table of Contents

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

If you need additional customization or prefer to use the previous custom implementation, the custom code snippet below is still supported.

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 the Code page.
3. If you want the Table of Contents to appear across the whole site, add the code at the site level.
4. If you only want the Table of Contents to appear on one page, add the code at the page level.
5. In the Head tab, paste the CSS snippet for the floating Table of Contents.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/Floating-TOC/floating-v2.css">

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

<script src="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/Floating-TOC/floating-v2.js"></script>

1. Save your changes.
2. Open your live Super site and refresh the page.

Optional style customization

If you are using the custom code version, you can customize its appearance by editing the CSS variables.

: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.
• 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.