How to Create a Dropdown Menu in Squarespace (With Bonus css Code)

Dropdown menus are an excellent way to keep your website navigation clean and user-friendly.
They help group related pages under a single menu item, creating a seamless browsing experience.
However, one common limitation of Squarespace is that the main link of a dropdown menu isn’t clickable by
default—it only expands the menu.

In this guide, I’ll show you how to create dropdown menus in Squarespace and share a bonus tip with custom code to make the main link clickable. Ready to elevate your website’s navigation? Let’s get started.

✨ Creating a Dropdown Menu in Squarespace

Squarespace makes it incredibly simple to set up dropdown menus. Here’s how:

• Log in to Your Squarespace Account
  Head to the Squarespace website and log into your account.

• Go to the Navigation Panel
  From the dashboard, navigate to Pages, where you can manage your site’s structure.

• Add a Folder to Create a Dropdown Menu

  • Click the ‘+’ button in the Pages panel.

  • Select Folder from the list.

  • Name your folder (e.g., “Services” or “About Us”). This will act as the main link for your dropdown.

• Organise Your Pages
  Drag existing pages into the folder or create new ones by clicking the ‘+’ button inside the folder.
  These pages will appear as dropdown options beneath the folder name.

✨ Enhancing Dropdown Functionality

By default, Squarespace folder links aren’t clickable—they simply expand the dropdown menu.
If you’d like the folder link to act as a proper clickable link (e.g., redirecting users to a landing page), we’ll need to add a small piece of custom code.

✨ Add Code for Clickable Dropdown Links

Access the Code Injection Panel
Go to Settings > Advanced > Code Injection in your Squarespace editor.

1. Insert the Following JavaScript in the Header Section

2. Adjust the Code to Match Your Site

   • Replace /services with the slug for your folder (e.g., /projects, /about).

   • Replace /all-services with the URL where you want the main folder link to redirect.

<!-- 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 ----------------------------------->

✨ Add Supporting CSS

To ensure everything functions smoothly, add this CSS under Design > Custom CSS
This CSS tidies up the default folder link behaviour and ensures the navigation menu works as intended.

.header-nav-folder-item:first-of-type a 

{ 

display: none !important;

}

✨ Why Make Dropdown Links Clickable?

A clickable dropdown link is perfect if your folder represents a category or landing page that you’d like visitors to explore. For example, a “Services” dropdown could link to an overview page while also offering subpages for individual services like “Web Design” or “SEO Services”. It’s a small adjustment that can make a big difference to your user experience.

✨ Conclusion

Adding dropdown menus to your Squarespace site is a brilliant way to keep things organised and user-friendly.
With just a touch of custom code, you can transform your dropdown navigation into something more dynamic and functional, giving your visitors the best possible experience.

If you’re looking for more ways to customise your Squarespace website or need help implementing advanced features, don’t hesitate to get in touch. I’m here to help you create a professional, polished site that works as beautifully as it looks.

Looking for a squarespace designer?

Let’s create something great! Book a free consultation today!