Clickable dropdowns for Squarespace

A plugin that allows you to *properly* link your folders to pages (they are not clickable by default in Squarespace).

SquareSpace 7.1

• Requires Business plan or higher

Free

Get code

Why use

Dropdown links are not clickable by default, but users might expect them to be. On mobile there is no way to reach dropdown link, so we need to accomodate for that too.

Code

<!-- 
Clickable dropdown/folder links v1.0 by opsquare.co --> 

<!-- Folder link plugin JS --> 
<script>  
window.addEventListener('DOMContentLoaded', (event) => {
    
  const folders  = document.querySelectorAll('.header-display-desktop .header-nav-item--folder');

    [...folders].forEach((folder) => {
        const firstLinkHref = folder.querySelector('.header-nav-folder-content div.header-nav-folder-item:first-child > a').getAttribute('href');
      folder.querySelector('.header-nav-folder-title').setAttribute('href', firstLinkHref);
      folder.querySelector('.header-nav-folder-title').addEventListener('click', function () {
			window.location.replace(firstLinkHref);
       }); 
    });
  
});
</script>


<!-- Folder link plugin CSS --> 
<style>
  
/* Allow folders link to be clicked */
.header-nav-item--folder,
.header-nav-folder-title {
  pointer-events: auto !important; 
}
  
/* Hide additional links on desktop and beyond */
@media (min-width: 700px) {
   .header-nav-folder-content div.header-nav-folder-item:first-child > a {
	 display: none;
   }
}
  
</style>
<!-- END FOLDER LINK PLUGIN -->

How to install

Add a new link to any dropdown menu (on desktop).

Use it to define the destination URL
It will also appear in mobile navigation automatically

Name the link something like:

“View all”
“Explore”
“See everything”, etc.

Copy the plugin code into your Custom Code Injection section.

The feature will then apply automatically to all dropdown menus site-wide.