How to add a Squarespace dropdown menu in your navigation!
Adding a Squarespace dropdown menu in your navigation is a fantastic way to keep your top level navigation streamlined and simple, without requiring people to click through lots of stages to find what they’re looking for (defs important for a clean & effective user experience)
I’m a particular fan of using a dropdown nav when your services have different target audiences In this can you’d have a dropdown menu titled services which each service landing page sits underneath.
But there are a bunch of different use cases for a dropdown menu navigation on your Squarespace site & these simple steps will allow you to implement a Squarespace dropdown menu however suits you!
This post may contain affiliate links. These are denoted by a *. If you make a purchase via one of these links I may get a small kickback. I only recommend products and services I use and love myself! Thanks in advance :)
In this post I’m covering…
How to add a dropdown menu to your Squarespace navigation
How to add anchor links to a dropdown menu (if you want people to skip to a particular part of a page)
How to make the title of your dropdown menu non-clickable (it goes automatically to the first item in the dropdown which doesn’t make a tonne of sense, so we can overrule this easily with a spot of code
My fave plugins/ options for more complex dropdown menus
Let’s get to it!
How to add a dropdown menu to your Squarespace website navigation
1. From your pages menu (now called “website” in the new Squarespace navigation) we are going to add a folder.
2. Click the plus button, and from the list of options, choose “folder”.
3. Name your folder and make sure it’s in your “Main Navigation” section.
4. Now you can either drag and drop existing pages into your folder, or click the “add page” button under your folder to add a page (you can also add a collection like a blog, portfolio or store if you want.
Add as many pages as you like to your dropdown menu (I suggest a maximum of 4 or 5 so it doesn’t get confusing)
5. Now if you head across to your header navigation, you’ll see the title of your folder is the title of the dropdown, and if you hover over it the pages and page collections you added to it are shown in the dropdown navigation below.
As simple as that!!
How to add anchor links to your dropdown menu on your Squarespace website navigation
Now if you’ve got a one-page website whereby you want people to be able to select an option in your navigation and scroll down to that part of your page (or if you want to use your dropdown navigation menu to get more specific about the part of a page they’re taken to we can add anchor links to our dropdown menu.
1. First create your anchor link (also known as a '“jump to link”.
Not sure how? Follow the steps in this blog post to get the link to your destination.
2. Now head into your folder within your “Pages/ Website” menu.
3. Click the plus icon to add a page and select “Link” (it’s right at the bottom).
4. In the pop up that comes up, you’ll want to add your link title (this is what shows up in your navigation dropdown).
5. Then add your link to where you want people to be taken.
Important note! If you have multiple pages on your site, make sure you have your page before the dive ID or block ID ie /about#team as opposed to just #team so that the link works.
& Voila!
Using this example you could have a dropdown for “About” and underneath this have “Our Values”, “Meet the team”, “Find us” each taking people to that specific part of the about page using anchor links.
How to make the title of your Squarespace dropdown menu not clickable
A weird quirk of Squarespace is that they’ve made the title of the dropdown menu take you to the first link in the dropdown (which clearly makes no sense!) soooo… let’s talk about how to make this title of your squarespace dropdown navigation not clickable.
To do this, we’ll need to add a spot of CSS, but don’t panic, it’s easy to do.
1. Navigate to your CSS panel (to find this the easy way hit SHIFT / then type in CSS.
Click on “Custom CSS” and you’ll be taken to your CSS panel.
2. Here you’ll want to paste in this code snippet:
/* make dropdown title non-clickable */
.header-nav-folder-title {
pointer-events: none;
}Once you do this you’ll notice that when you hover over the top item in your navigation dropdown that you no longer have the hand icon appearing, instead you’ll see the arrow cursor showing that this item is no longer clickable.
Easy huh?!
Wanting a more complex navigation structure or “mega menu”?
This could include having more complicated lists and categories (great for stores) or even including images in your dropdown menu (like this one below!)
This calls for the pros! You can grab the mega-menu course from Squarestylist which will walk you through the step-by-step on how to create your own incredible, stylish & unique mega menu navigation, learning the code along the way (perfect if you’re code curious & wanting to increase your skills).
Alternatively, Will Myers has this fab free tutorial and if you want it making even easier a $10 plugin to create your Squarespace mega menu without the fuss!
& Voila How to add a your Squarespace dropdown menu in your navigation made super simple!
Enjoyed this? You’ll love these!
New on the ‘Gram…
