Jump to content

How do you make a dropdown navigation folder clickable?

Recommended Posts

I'd like to place a few Categories into a folder, and have the Main Link (the Folder itself) actually link to a Category too.

How is that possible?


alt text

I need the Folder Link (Decorate) to actually take people to the Category for Decorate so I don't have to list it inside of the Folder.

So basically my question is how do I turn the Folder Link into an actual link? I saw your other thread about this but it doesn't work if the links are External Links, which these are...


Link to comment
  • Replies 39
  • Views 47.7k
  • Created
  • Last Reply
  • 2 weeks later...

You could use JQuery or YUI3.


Y.one('.folder').on('click', function () {

I know you were probably searching for a solution supported by Squarespace 6 - this is not that answer, but it will help you if you really need to get this done.

Developer Evangelist at Squarespace.

Link to comment
  • 1 month later...

I just posted about something like this - the only automated way to do it is to actually include the page rather than the link. The folder automatically clicks to the first normal page (NOT BLOG) it finds in the folder. I just posted saying there should be an open that says the click opens to a predefined link. The problem with putting the page in there is that it makes two links to the same page - the actually Main Nav Link and the page in the drop down. Kinda redundant.

Link to comment
  • 1 month later...
  • 5 months later...

I went looking for this earlier, and put it through usability testing on mobile. It's problematic on touch devices (iPad/tablets), simply because you can't get the folder open on mouse-over. The way to get the folder open on touch is to CLICK it, and if there's a link on the folder, you'll get scooted-away to the landing page before you can select a subpage. —or disable that click on touch devices. m-kay.

What I found, I posted here. (and posted the script too)

Link to comment
  • 3 weeks later...
  • 1 month later...
  • 1 year later...


$(function() {

$('.main-nav li a').each(function () {

if ($(this).text() == 'Folder 1') {




if ($(this).text() == 'Folder 2') {







Link to comment

I took the approach of adding an 'overview' page as the first item in the folder.

Then I added the following code into the Code Injection section of the advanced settings, to make clicks on that folder go to its first subpage instead.

var folders = document.querySelectorAll('.folder-collection > a'),
   folder_click = function () {
       var a = this.parentNode.querySelector('.subnav a');
       window.location = a.href;
Array.prototype.forEach.call(folders, function (folder) {
   folder.addEventListener('click', folder_click);

Also: the following snippet of CSS (pasted in the Custom CSS editor) will hide the first item in the folder, creating the impression that the folder itself is a page.

.folder-collection .subnav ul > li:first-child { display: none !important; }

This entire thing is a horrible workaround, but it works.

Link to comment

Hey I have the same exact problem that you do. I added an overview page as the first page in the folder, but I do not want the overview page to show up in the dropdown.

I tried adding this code but it didn't change anything:

.folder-collection .subnav ul > li:first-child { display: none !important; }

Any help would be greatly appreciated, thanks.

Link to comment

Move your overview page to the NOT LINKED section of your PAGES list.
The problem you are having is because your overview page is in the navigation folder. Everything in that folder will show. This is how I got it to work for me. I don't you will need the added code you quoted above.

Link to comment
  • 9 months later...

I have a similar issues. I have a folder called Destinations. I have 3 pages under Destinations. I have a page called destinations under not linked section and it contains information about the sub pages and some more information.

When I click on the Destinations folder I want it to navigate to Destinations page. So I injected the code in the header

I am not sure what the problem is. It doesn't go to destinations page instead it opens a page for the first sub menu item.

Link to comment

@uma looks like you're adding an unnecessary link in your script. Also it will be much easier to test if you use relative (instead of absolute) links to pages. Instead of linking to "http://www.evoqueventures.com/destinations" ... just link to "/destinations".

Try this:

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> $(function() { $('.main-nav li a').each(function() { if ($(this).text() == 'Destinations') { $(this).attr('href','/destinations'); $(this).attr('onclick','true'); }}); }); </script>

(if it was mangled, here's an image)alt text

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.