How to make folder titles clickable in Squarespace 7.1
By default, folder titles in Squarespace 7.1 are not clickable. Instead, they simply expand to reveal the pages inside the folder.
While this works for navigation, many website owners prefer the folder title itself to link to a landing page while still allowing visitors to access the dropdown menu.
In this tutorial, you'll learn how to make folder titles clickable in Squarespace 7.1 using a small amount of JavaScript and CSS..
Table of Contents
Why make folder titles clickable?
Making folder titles clickable improves both navigation and usability.
Some common use cases include:
Direct visitors to a Services overview page
Link to a Portfolio landing page
Create a Shop homepage before displaying categories
Improve navigation on larger websites
Reduce the number of unnecessary menu items
Instead of wasting a menu item on an overview page, your folder title becomes both the parent page and the dropdown trigger.
How It works
The script automatically looks for folder navigation items inside your Squarespace header.
If a folder contains a page with the same URL as the folder's intended landing page, the JavaScript converts the folder title into a normal hyperlink while preserving the dropdown functionality.
A small amount of CSS is then used to ensure the styling remains consistent with the rest of your navigation.
Step-by-step instructions
Step 1: Add the JavaScript
Add this code to:
Custom Code → Code Injection → Footer
<!-- Copyright Primitus Consultancy -->
<!-- Make folder titles clickable in Squarespace 7.1 -->
<script>
document.addEventListener("DOMContentLoaded", function () {
function PC_makeFolderTitlesClickable() {
/*
=====================================
DESKTOP NAVIGATION
=====================================
Squarespace uses a button for folders
=====================================
*/
const PC_folderButtons = document.querySelectorAll(
".header-nav-folder-title"
);
PC_folderButtons.forEach(PC_button => {
if (PC_button.dataset.PCfolderLinkAdded)
return;
const PC_folderURL = PC_button.dataset.href;
if (!PC_folderURL)
return;
const PC_folderTitle = PC_button.querySelector(
".header-nav-folder-title-text"
);
if (!PC_folderTitle)
return;
PC_button.dataset.PCfolderLinkAdded = "true";
PC_folderTitle.style.cursor = "pointer";
PC_folderTitle.addEventListener(
"click",
function(PC_event){
PC_event.stopPropagation();
window.location.href = PC_folderURL;
}
);
});
}
/*
=====================================
INITIALISE
=====================================
*/
PC_makeFolderTitlesClickable();
/*
=====================================
OBSERVE SQUARESPACE AJAX CHANGES
=====================================
*/
const PC_navigationObserver = new MutationObserver(
function(){
PC_makeFolderTitlesClickable();
}
);
PC_navigationObserver.observe(
document.body,
{
childList:true,
subtree:true
}
);
});
</script>
<!-- make folder titles clickable in Squarespace 7.1 -->
Step 2: Add CSS
Custom Code → Custom CSS
/*
=====================================
Clickable Folder Titles
=====================================
Ensures folder titles behave like links
while maintaining Squarespace's existing
navigation styling.
*/
.folder-title-link {
color: inherit; /* Keeps the original navigation colour */
text-decoration: none; /* Removes default link underline */
display: inline-block; /* Allows proper spacing and click area */
}
.folder-title-link:hover {
color: inherit; /* Prevents colour changes on hover */
text-decoration: none; /* Keeps hover state clean */
}
/*
=====================================
Folder Title Alignment
=====================================
Keeps the folder title text and dropdown
icon aligned correctly.
*/
.header-nav-folder-title-text {
display: inline-flex;
align-items: center;
cursor: pointer; /* Indicates the title is clickable */
}
/*
=====================================
Folder Dropdown Button
=====================================
Maintains the expected cursor behaviour
for Squarespace folder navigation.
*/
.header-nav-folder-title {
cursor: pointer;
}
Key Takeaways
Works with Squarespace 7.1
Improves website navigation
Keeps dropdown menus intact
Better user experience
Ideal for service-based businesses, portfolios, agencies and online stores
Quick installation
Lightweight JavaScript
No third-party libraries required
FAQs
Does this work in Squarespace 7.1?
Yes. This solution is designed specifically for Squarespace 7.1.
Will it work on mobile?
Yes. The JavaScript and CSS are designed to work across both desktop and mobile navigation.
Does it affect SEO?
No. Making folder titles clickable simply creates a standard navigation link and does not negatively affect SEO.
Can I choose which folders are clickable?
Yes. Depending on the implementation, the script can be customised to target specific folders instead of every folder on your site.
Will Squarespace updates break it?
Since the solution relies on the existing navigation structure, occasional updates may require minor adjustments. However, the code is lightweight and easy to maintain.
Conclusion
Clickable folder titles are one of those small improvements that can make a significant difference to your website's usability.
Instead of forcing visitors to expand a folder before reaching your main landing page, you can provide direct access while still keeping your dropdown navigation organised.
If you're looking to create a cleaner, more intuitive Squarespace navigation menu, this simple JavaScript and CSS solution is an effective way to achieve it.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, you can book our consultation services.
