How to Create a Dropdown Menu in Squarespace (With Bonus css Code)
Dropdown menus are a great way to group related pages and keep your primary website navigation clean.
However, Squarespace has a well-known limitation: the main folder title of a dropdown menu isn't clickable by default. It only acts as an accordion trigger to expand the menu underneath it.
If you want the main folder title to double as a link—for instance, directing users to an "All Services" landing page—you can easily bypass this restriction using a short snippet of custom code. Here is exactly how to set up your dropdown folders and add the click-through functionality.
Step 1: Create your dropdown folder in Squarespace
First, we need to build the standard dropdown layout within your pages panel.
Log into your dashboard and navigate to Website (or Pages).
Click the + (Plus) icon in your main navigation section.
Select Folder from the dropdown options.
Name your folder (e.g., "Services" or "About"). This name is what visitors will see in your top navigation menu bar.
Drag your existing pages into this folder, or click the + (Plus) icon inside the folder to create new ones.
Step 2: Add the JavaScript to enable the link click
Because Squarespace folders don't natively allow click-throughs, we need a small piece of JavaScript to change how the folder title behaves when clicked.
From the main backend menu, click on Website.
Scroll to the utilities section at the bottom and click Website Tools.
Click Code Injection.
Paste the following snippet into the Header block:
<!-- Clickable Navigation Dropdowns on Squarespace 7.1 ----------------------------------->
<!-- Add in your code injection. Do NOT re-publish.-------------------------------->
<script>
document.addEventListener('DOMContentLoaded', function()
{
var link = document.querySelector('a.header-nav-folder-title[href="/services"]');
if (link)
{
link.addEventListener('click', function(event)
{
event.preventDefault();
window.location.href = '/all-services';
})
}
});
</script>
<!-- End ----------------------------------->
How to customize this code for your site:
Replace /services on line 5 with the exact URL slug of your folder.
Replace /all-services on line 11 with the slug of the page where you want visitors to go when they click that main title link.
Click Save in the top-left corner.
Step 3: Add the fallback CSS
Sometimes Squarespace automatically duplicates or handles folder structures rigidly depending on your header settings. Adding this simple rule to your site stylesheet fixes the presentation layout:
Go back to Website > Website Tools.
Click Custom CSS.
Paste the following clean rule:
/* Fix folder link layout behavior */
.header-nav-folder-item:first-of-type a {
display: none !important;
}
Why this small change matters for user experience
Making your dropdown folder clickable is ideal if your menu item serves as a broader category or landing page. For example, clicking "Services" can take visitors to a complete overview page that outlines your overall framework, while the dropdown menu below it still offers quick links to specific subpages like Web Design or SEO.
It is a small, quiet detail that makes navigating your site feel significantly more intuitive and less restrictive.
Wrap up
Dropdown folders are brilliant for keeping your navigation organized, and adding a touch of custom code ensures they work exactly the way your visitors expect them to.
If you are currently setting up your Squarespace site and want to customize its structure, tweak your layouts, or need a hand implementing custom code features, feel free to drop me a line. I’m always happy to help independent brands and creative studios build spaces that function just as beautifully as they look.