Table of Contents on a Squarespace Website

As we all know, Squarespace does not have a table of contents block. However, there is a simple solution that is based on what Squarespace uses on its own website. Assuming you are already familiar with most Squarespace settings, I have simplified this article to make it as easy as possible.

Why It Is Important

There are at least two reasons why a table of contents might be important for your website. First of all, it is much easier to navigate through the page. You just can’t deny this fact. Some articles are 3000-5000 words, and if you don’t want to scroll through the whole article to find a piece of specific information, only Command+F may help. With a table of contents, the chances that your visitor would find the needed information is higher. Not even saying that it will be done much faster.

The second reason might not be that obvious as the first one, but still very important from the SEO point of view. When you google about something specific, Google sometimes may give you a link to the exact part of the page where this information is located. One of the reasons Google is able to do that is because the ID you add to your subtitle is one of the requirements for a table of contents. We will talk about that in the Anchor Links paragraph.

How It Works

Essentially, you need to create anchor links, then add custom HTML code that will be converted to a table with links. Squarespace already has everything required for that, so there is no need to write any code from scratch. We will be using the exact same CSS and HTML that Squarespace uses on its own website. For example, let’s open the Creating anchor links page. There is a table of contents with a simple and clean design that would work for many websites. We will make exactly the same table for our Squarespace website. You, of course, can adjust it to your own needs.

CSS Code

Now, using developer tools, we can find HTML and CSS used on the Squarespace website. CSS code goes to website settings and HTML code goes to a webpage or blog post. CSS is a one-time action and it would work for all the future tables of content you will be creating. To save your time, here is the CSS code I extracted from the Squarespace website:

.table-of-contents {
    display: block;
    background-color: #f5f5f5;
    padding: 22px;
    margin: 0 0 1em /*1em*/;
    min-width: 30%;
    /*max-width: 60%;*/

.toc-title {
    display: block;
    margin-top: 0;
    margin-bottom: 1em;
    border-top: none;
    padding-top: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1em;
    color: #444;

.toc-links {
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    color: #b8b8b8;
    margin-bottom: 0;
    padding: 0;
    font-weight: lighter;
    font-size: 15px;

.toc-links li {
    line-height: 1.4em;
    padding-bottom: 0.6em;
    margin-left: 0;

.toc-links a {
    text-decoration: none;
    color: #737373;

The table of contents needs to know where it must send you to, and the anchor links would help with that. If you don’t know what an anchor link is, then the simplest answer is that regular links move you between pages, but anchor links move you inside the specific page.

In our case, we would need to “attach” an ID to specific parts of a page. For example, a subtitle would work best for it. So, instead of adding a regular heading title in Squarespace, you would need to add a code or markdown block and insert this line:

<h3 id="important">1. Why It Is Important</h3>

Replace h4 at the beginning and the end to accommodate your needs.

One important thing – this ID must be unique across a page.


The final part is inserting HTML code that would be converted to a table and would be adjusted with the CSS we already inserted.

Basically, you would only need to change the title of your list and add/remove needed lines. The value of the “a href” must match with the Anchor ID we discussed in step 4.

<aside class="table-of-contents">
  <span class="toc-title">Sections</span>
  <ol class="toc-links">
    <li><a href="#important">1. Why It Is Important</a></li>
    <li><a href="#how-it-works">2. How It Works</a></li>
    <li><a href="#css">3. CSS Code</a></li>
    <li><a href="#anchor-links">4. Anchor Links</a></li>
    <li><a href="#html">5. HTML Code</a></li>
    <li><a href="#automation">6. Automation Solution</a></li>
    <li><a href="#updates">7. Updates</a></li>

Automation Solution

Now the most exciting part! What if you need to create a table of contents every day? There are many solutions. For example, you can use plugins or you can write an HTML code as discussed before. Both variants have pros and cons, so that is why I create a simpler solution and it works through Google Spreadsheets.

Essentially, you just need to type your data and this spreadsheet would generate the needed HTML code which you would need to copy on your page or blog post using the Code block.

  1. Type your link titles (subtitles).
  2. You may click Auto ID if you want this spreadsheet to automatically generate the link HTML ID based on subtitle.
  3. Don’t forget to choose the desired text style (h1-h4) in the G4 cell.
  4. Select or type table title in G3 cell.
  5. Copy/paste code from the green field into the Code block.
  6. Copy/paste Subtitle HTML Code instead of your regular subtitle using the Markdown Block.

You are very welcome to copy this spreadsheet and use it for your needs. In my workflow, I keep the “Data” sheet untouched and just create a duplicate of this sheet for every article.



  • New simplified/improved algorithm. So it would be easier to add new features and options in the future.
  • Line numbers. Can be applied to the table, subtitles, or both.
  • Same text style for all subtitles. No need to choose it for every single subtitle.
  • Option to include or not include table title.






29 responses to “Table of Contents on a Squarespace Website”

  1. adam elmakias Avatar
    adam elmakias

    This is awesome, thank you so much. I am going to use this on my site! Any other Squarespace tips you think I should consider as a top priority on my website?

  2. Melanie Avatar

    This is exactly what I was looking for – thank you SO much for taking the time to share, you’re officially awesome!

    1. Katya N Avatar
      Katya N

      Thank you 🙂

      The next small update with line numbering is coming soon.

  3. braden Avatar

    That is awesome. Thanks so much.

  4. Paris Avatar

    Thank you so much for sharing this! I was looking exactly for a solution like this. A table of contents is absolutely necessary on a 4000+ words article 🙂 Again, thank you!

  5. Cyril Avatar

    Super smart! Thank you very much for sharing it.

  6. Naomi Avatar

    Thank you SO MUCH. I’ve needed a way to do this for years!!

  7. Joshua Schweigert Avatar
    Joshua Schweigert

    This tutorial is so clutch! Thank you for sharing!

  8. Sami Avatar

    Awesome Tutorial, thanks!! I am using it on the sidebar, I wanted to make it sticky, I added those properties but I don’t seem to make it work, could you help 🙂

    position: sticky;
    position: -webkit-sticky;

    1. Katya N Avatar
      Katya N

      Let’s try! What would your website be?

      1. Sami Avatar

        Thanks for the fast reply, Here is the page where I wanted to have it sticky.

      2. Katya N Avatar
        Katya N

        I found this article:

        I tried “fixed” instead of “sticky” and seems like it worked. You would only need to add extra CSS to make it look good.

  9. denis Avatar

    Great blogpost. Very useful and easy to implement. Thank you!

  10. Kristie Avatar

    This was so helpful! Thank you for putting it together!!

  11. Piers H. Gardener Avatar
    Piers H. Gardener

    If I wanted to make the block sticky, what is the specific code needed and where should it go?

  12. Petra Avatar

    Thanks so much for making this easy!

  13. dakfu Avatar

    Thank you so much!!!

  14. David Avatar

    This is so incredibly helpful, thank you! Only issue I’m having is that the block is transparent. It still says block color: #f5f5f5; But it’s transparent! Any suggestions?

  15. Ceridwen Avatar

    Wonderful and amazing help!!

  16. Dany Avatar

    Hi Katya, thank you very much for this content. Very helpful. Is there a way to make it hierarchical for exemple :

    Any suggestion?
    All the best,

  17. Naomi Avatar

    I can’t thank you enough for figuring this out!!! This is something I’ve wanted for years.

    BTW, have you noticed that Squarespace now has a new TOC format? It sticks to the right side as you scroll down, and even telescopes. I’ve tried to find the CSS code for this, but I can’t figure it out. Any ideas on how we could implement this newer TOC format?

  18. Seb Avatar

    Thank you so much for this. ~ Seb

  19. Cass Avatar

    This is great thank you SO much!!! I’m curious tho, besides adding bolding to each individual title, is there a way to easily incorporate adding the “b” to this table as most of my titles across my blogs are bolded?

  20. Jonathan Palmer Avatar

    Super useful. Looks great and just works. Much appreciated.

    Couple of questions…
    How can you change the positioning of the table title?
    and change the top padding of where the links take you on the page? – we have some nav effects and sticky sections that require content to have a bit top padding.

  21. Jessica Rodriguez Avatar
    Jessica Rodriguez

    I can’t thank you enough for this!!! It works great!

  22. thepixelsheep Avatar

    This is really great but somehow I´ve got huge space between headings and the text. How do I fix it?

  23. Sol Avatar

    Thank you, I needed it.

  24. Paola Avatar

    Thank you so much is just what I was looking for. I wanted to ask you. I managed to change the background colors with my colors. Can I also insert a button that closes and opens the table? Type Show and Hide? Thanks

  25. Jenn Avatar

    Thank you for this – I have found that when you click on the link in the table of contents it jumps down but past the actual title of the section. Is there something i can do to correct this? thanks.

Leave a Reply