How to Add a Table of Contents to Squarespace
A long page should make its useful parts easy to find. A short section menu can guide visitors through a service page, while an article with many headings may benefit from an automatically generated contents list. Choose the smallest navigation system that helps readers reach the information they came for.
Use native anchors for section navigation
Squarespace 7.1 supports built-in anchor links for eligible page sections. Edit the section, enter an Anchor Link slug, copy its link, and use it in a text or button link. Follow Squarespace's current anchor-link instructions.
Give each section a unique slug and write link labels that explain the destination. If the page, domain, or anchor changes later, update the links. Some section types do not expose an anchor field; Squarespace documents using a blank section above them as an alternative.
A section link points to a section boundary. It does not automatically create a list of every H2 or H3 inside an article. That distinction matters on a detailed tutorial, policy page, resource guide, or long service explanation.
Organize the headings before adding a list
Use headings that describe the actual content underneath them. Keep the hierarchy meaningful: a page title, major sections, then subordinate topics. Bold paragraph text is not a substitute for a heading element when a contents tool needs to discover it.
Do not include every short subheading simply because it is available. A contents list that is longer than the article's introduction can become another obstacle. Choose the levels that help readers understand the page and keep essential pricing or action buttons visible outside the list.
When an automatic contents list fits
The Table of Contents Generator reads selected H2, H3, and H4 headings inside one content area. It leaves the surrounding page layout in place and renders the list at the Code block's location. It does not create a sidebar, rearrange native blocks, or import headings from another page.
Customize and preview free. The code export costs $11.99 once for personal use; packs and commercial licenses have separate terms. Existing owners can sign in from the generator. Resolve a license-check error before purchasing again.
The preview uses editable examples to show the selected heading levels, colors, numbering, and disclosure. Example headings are not included in the exported code. The installed list reads the actual published page.
Choose one content area
The content selector identifies the area containing your article. The default is main; a particular page may instead need article, a class, or an ID. Inspect the page before choosing. A familiar-looking class name is not proof that it matches your template.
The export requires exactly one matching content area and at least two eligible headings. It excludes site headers, footers, navigation, sidebars, hidden content, and headings whose existing IDs are duplicated elsewhere. If no suitable list can be built, it stays hidden.
Unique existing IDs remain unchanged. Headings without IDs receive generated ones for navigation. Define your own stable anchors when you intend to share permanent links outside the page; changing heading text or order can affect generated destinations after a fresh load.
Keep navigation readable and predictable
Start with the inline layout. Optional sticky positioning depends on the surrounding container and becomes inline on narrow screens. Inspect it on the actual page before choosing it for a sidebar-like placement.
A collapsible list lets readers reduce its height using a native disclosure. Links move keyboard focus to the selected heading. The header offset leaves room when those links scroll to their destination, and the current-section highlight helps readers see their place.
Instant scrolling is the default. Optional smooth scrolling respects reduced-motion preferences and affects this list's links only. Browser history, keyboard use, and a narrow-screen visit should all remain comfortable after installation.
Install and inspect the published page
JavaScript in Code blocks currently requires Core, Plus, or Advanced. Check legacy-plan support before buying. Read Squarespace's Code block requirements.
- Confirm the article's real heading levels and the unique content area you want to use.
- Configure the title, levels, appearance, and reading controls. Use the preview to compare options.
- Add an HTML Code block where the list belongs, turn Display Source off, and paste the entire licensed export. Replace any old copy; this version is not for site-wide footer injection.
- Inspect the published page while signed out. Follow every contents link and check the destination, keyboard focus, header clearance, disclosure, and current-section highlight.
- Check narrow and wide screens, reduced motion, page transitions, and Back/Forward navigation. If the list is missing, review the selector, eligible heading count, and duplicate IDs.
The export watches for heading and content changes. Without JavaScript, the extra list stays hidden and the article remains readable. A successful generator preview does not establish that an installed page works with its theme and other scripts.
Judge it by what readers can accomplish
A contents click shows navigation, not a lead or sale. Pair a useful article with a relevant next step, then measure completed inquiries or purchases separately. A table of contents does not guarantee search sitelinks, indexing, or higher rankings.
Preview a contents list