Background

On the latest version of Squarespace (version 7.1), the dropdown folders in the desktop navigation cannot be clicked! You can place links within the dropdowns (previously called “folders”) but the dropdown title itself is not clickable! This was a deliberate design decision.

This is a common complaint for users who see this behaviour on other websites and expect it to work on Squarespace too. If the dropdowns were clickable, this would maintain a consistent interaction pattern with other clickable elements on the website. Users are accustomed to clicking on buttons, links, and other interactive elements to trigger actions, so why not the dropdowns?

The history

There’s a site navigation on both the desktop and the mobile version of the site but we don’t want dropdowns to be clickable on mobile otherwise, whenever users tapped on the “dropdown” within the mobile navigation, they’d be taken straight to the linked page and they’d never see the options within the dropdown! However, there are now two separate versions of the navigation - one for desktop and one for mobile - so this isn’t an issue today!

This guide was updated on 22 October 2025 due to a Squarespace navigation update.

The solution

The solution is to add some code, but don’t worry if you’ve never used code before. This isn’t difficult and I’ll explain the steps.

Before you start, there’s one thing you need to check. If your trial has expired, which website billing plan are you on? You’ll need to be on a trial or on any paid plan except Basic or Personal as these billing plans don’t support code; this is an upsell by Squarespace to encourage power users to pay more for additional features.

Step1: Check the URL of the Navigation Dropdown

I’m going to assume that you’ve already added a Dropdown to your Navigation. Having done this, view the dropdown in your Pages panel and click the ‘gear’ icon beside it to launch the configuration panel for this Dropdown.

You’ll see a URL Slug for this Dropdown. You should not change this Slug, but please make a note of it, to use in a later step. The example in my screenshot is “/new-dropdown” which is the default slug when you add your first dropdown.

Step 2: Check the slug of the page you want to reach

When someone clicks this navigation dropdown, to which page do you want to send them? For example, do you want to send them to the first page in this dropdown, or to another page? At this point, it’s a good idea to check the URL Slug of the page that you want them to view. You can check this by clicking the ‘gear’ icon beside the page.

Step 2: Go to the Code Injection panel

Go to the Code Injection area. You should find this in Website > Website Tools > Code Injection. However, Squarespace are having lots of fun moving options around at the moment so, if you can’t find it, take a look in this guide.

In the Code Injection area you should find a number of panels, including the Header and Footer panels. You need to go to the Footer panel. Typically, this will be empty but if there’s already some code in there, you’ll want to add new code at the very end.

Step 3: Add this code to the Footer Code Injection panel

Here’s the code that you need to add to the Footer Code Injection panel:

<!-- Clickable Navigation Dropdowns on Squarespace 7.1 ----------------------------------->
<!-- Copyright Soundfocus Digital Ltd [https://sf.digital] ----------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.-------------------------------->
<script>
document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('button.header-nav-folder-title[data-href="/new-dropdown"]');
  
  if (button) {
    button.addEventListener('click', function(event) {
      event.preventDefault();
      window.location.href = '/my-page-link';
    });
  }
});
</script>
<!-- End of Clickable Navigation Dropdowns ----------------------------------------------->

When you’ve added this, there are two elements that you’ll need to edit before you save the changes.

The first element is “/new-dropdown” on line 6. Change this to match the URL Slug of your Dropdown, that you noted in step 1 earlier.

The second element is “/my-page-link” on line 11. Change this to match the URL Slug of the page you’d like to users to reach when the click the Dropdown title. You noted this in step 2 earlier.

Step 4: Save your changes

You can now Save the changes and step back to admire your work.

Step 5: Testing

To test your clickable folder, please view your website using a different browser or an incognito/private window where you aren’t logged in to Squarespace. This will allow you to view the website like a visitor. If you don’t follow this advice, and instead decide to test it whilst you’re logged in to your website, you’ll see some extra refreshes that don’t look great! This is normal and it won’t happen when visitors use your website! It’s just the way that the preview window functions when you’re logged in.

Want more clickable folders?

If you want to have more clickable folders, you can duplicate lines 6 to 13 and place them just above the final “});” in the original code. You can then edit these new lines to match the URL slugs, just as you did in steps 1 to 3 above.

How to make Squarespace navigation dropdowns clickable

Background

The history

The solution

Step1: Check the URL of the Navigation Dropdown