How to Add Vertical Side Tabs in Squarespace 7.1

Jun 25

What Are Vertical Side Tabs and Why Use Them?

If you're looking to create a cleaner, more interactive layout in Squarespace 7.1 — especially for service pages, product showcases, FAQs, or comparisons — vertical side tabs are a game-changer.

These tabs appear in a vertical menu on the left side of the page, letting users instantly switch between content sections on the right without reloading the page. The result?

✔ Smoother navigation
✔ Better organization
✔A modern, app-like interface

Squarespace 7.1 doesn’t offer this functionality out of the box, and most older plugins built for 7.0 don’t work reliably (or at all). But with just HTML, CSS, and a little JavaScript, you can add responsive, interactive vertical side tabs to any page, without slowing down your site or breaking the visual editor.

In this step-by-step guide, you'll learn exactly how to build this feature with clean code and native Squarespace tools — no plugins or Developer Mode needed.

Problem with Plugin-Based Solutions

While older Squarespace 7.0 plugins offered similar features, Squarespace 7.1 uses a different architecture. Many of these outdated plugins:

Break the visual editor
The cause section crashes
Slow down site performance

Solution: Native HTML, CSS & JavaScript

No plugins, no risk — just pure, lightweight code.

You’ll learn exactly how to build vertical side tabs using:

HTML for structure
CSS for styling and responsiveness
JavaScript for interaction

Where to Paste Code in Squarespace

  
      Code Type
      Where to Paste
    
      HTML
      Inside a Code Block in the section/page you want tabs
    
      CSS
      Go to Design → Custom CSS
    
      JavaScript
      Go to Settings → Advanced → Code Injection → Footer

Pro Tip: Never paste HTML inside a normal text block — always use a proper code block.

Step-by-Step Guide: Build Vertical Side Tabs

Step 1: Add the HTML

Inside a Code Block, paste the following:


<div class="side-tabs-wrapper">
  <div class="tab-menu">
    <button class="tab-link active" data-tab="tab1">Overview</button>
    <button class="tab-link" data-tab="tab2">Features</button>
    <button class="tab-link" data-tab="tab3">Specs</button>
  </div>
  <div class="tab-content-wrapper">
    <div class="tab-content active" id="tab1">
      <p>This is the overview content.</p>
    </div>
    <div class="tab-content" id="tab2">
      <p>Here are the features of the product.</p>
    </div>
    <div class="tab-content" id="tab3">
      <p>These are the technical specifications.</p>
    </div>
  </div>
</div>

Feel free to rename the tabs and replace the content as needed.

Step 2: Add the CSS

Paste the following into Pages → Custom code → Custom CSS


.side-tabs-wrapper {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  gap: 30px;
  padding: 20px;
}
.tab-menu {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
}
.tab-link {
  padding: 12px 16px;
  background-color: #f1f1f1;
  border: none;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  margin-bottom: 8px;
  border-radius: 5px;
 transition: background 0.3s, color 0.3s;
}
tab-link.active,
.tab-link:hover {
  background-color: #2D7893;
  color: #fff;
}
.tab-content-wrapper {
  flex: 1;
}
.tab-content {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
}
.tab-content.active {
  display: block;
}
@keyframes fadeIn {

  from { opacity: 0; }
  to { opacity: 1; }
}
/* Mobile Responsiveness */
@media screen and (max-width: 767px) {
  .side-tabs-wrapper {
    flex-direction: column;
  }
  .tab-menu {
    flex-direction: row;
    overflow-x: auto;
  }
  .tab-link {
    flex: 1;
    white-space: nowrap;
  }
}

Step 3: Add the JavaScript

Go to Settings → Advanced → Code Injection → Footer and paste:


<script>
document.addEventListener("DOMContentLoaded", function () {
  const tabLinks = document.querySelectorAll(".tab-link");
  const tabContents = document.querySelectorAll(".tab-content");
  tabLinks.forEach(link => {
    link.addEventListener("click", () => {
      const target = link.getAttribute("data-tab");
      tabLinks.forEach(btn => btn.classList.remove("active"));
      link.classList.add("active");
      tabContents.forEach(tab => {
        tab.classList.remove("active");
        if (tab.id === target) tab.classList.add("active");
      });
    });
  });
});
</script>

Bonus Features to Customize Like a Pro

Want to go beyond the basics? Here are some premium-style enhancements you can add:

Smooth Scroll on Tab Click
Automatically scroll users to the tab content when they click.
Color-Specific Tabs
Give each tab a different color with individual classes.
Deep Linking Support
Share URLs like yoursite.com/page#tab2 that open the right tab by default (advanced setup).

Frequently Asked Questions (FAQ)

1. What are vertical side tabs in Squarespace?

Vertical side tabs are a layout feature that displays a list of clickable tab buttons along the left side of the page, with corresponding content shown on the right side. They allow users to view multiple content sections without reloading or scrolling long pages, perfect for service overviews, FAQs, and product specs.

2. Does Squarespace 7.1 have built-in support for vertical tabs?

No. Squarespace 7.1 doesn’t support vertical tabs natively. However, this guide shows you how to build fully functional, responsive vertical tabs using HTML, CSS, and JavaScript, with no plugins required.

3. Will this work on mobile devices?

Yes. The CSS includes a responsive layout. On screens under 767px wide:

The vertical tab menu turns into a horizontal scrollable row.
Tabs remain functional and accessible across all screen sizes.

4. Can I change the number of tabs or rename them?

Absolutely. Just edit the HTML inside the Code Block:

Add or remove buttons and matching <div id="tabX"> content blocks as needed.

5. How do I customize the colors and styles of the tabs?

Inside the Custom CSS, modify the .tab-link, .tab-link:hover, and .tab-link.active classes. For example, to change the active tab color:


.tab-link.active {
  background-color: #yourColorCode;
}

6. What happens if I use older Squarespace 7.0 tab plugins?

Most older plugins break or perform poorly in Squarespace 7.1 due to major architectural differences. This guide avoids those problems by using lightweight native code, which:

Doesn’t affect page editor stability
Doesn’t slow down loading speed
Works seamlessly across templates

7. Can I make each tab link to a URL or page section?

This guide focuses on on-page tab interaction. However, you can add advanced features like:

Deep linking (e.g., #tab2 loads a specific tab by default)
Smooth scrolling on tab click
These require additional JavaScript, which can be added later for pro users.