How to create drop-down navigation menus on Squarespace
My older sister’s gym website was one of my first client sites that I built on Squarespace. Actually, I set up the basics for her and she took it over from there, transforming it into whatever she needed it to be.
So, imagine my stupid moment, when a couple years later, I realize she doesn’t like the long string of navigation links across the top. It was like that because she didn’t realize Squarespace has the ability to create drop-down menus, or how to do it obviously.
I dropped the ball on that for her, not that she was pissed about it, but I felt a bit bad about missing that detail. We’re actually in the middle of a total site redo anyway, so it’ll be fixed going forward. 🤦🏼♀️
That situation made me realize that I had taken my own knowledge for granted & assumed she knew, but it’s actually not an obvious thing.
Since it’s not obvious, even to the technically savvy like my sister, I’m sharing this quick tutorial with you! Let’s get to it.
How to create drop-down menus in your primary website navigation on Squarespace
This feature is so easy to use that it can be done in about 60 seconds. No joke!
Skip straight to the video?
Add a folder in your navigation
In your Pages menu, click the + to add a new page type, then go to the bottom & select “Folder.”
It will add a folder to that menu section, in this case the Primary Navigation area, since we want this to appear in the main menu of the website.
It will automatically create space for you to title this section, and you’ll want to keep the title related to the content you’ll be placing inside. So if you have a service based business, you could do add all of your pages for specific services under this drop-down category.
My one tip here would be to make it clear & concise. Don’t label it something that is cute, snarky, etc.; make it clear what viewers will find there so they don’t give up & sign off.
Add pages to the folder
Next, drag the pages into that folder group.
PRO TIP: It doesn’t matter where they currently are in the Pages menu, you can drag from Not Linked to Primary or Secondary nav if you want!
Using my previous example, I’d drag my website design services page, my retainer design services page, my consulting services page, and maybe my onboarding page into that Services folder group, so that those are the pages which display in the drop-down.
If you drag one in by accident, don’t freak out. You can drag it right back out again!
You’re done!
That’s literally all there is to it! No scary coding; no duplicating sections on a page with multiple views (I’m talking to you, Showit!) 😉
SEE FOR YOURSELF IN THIS QUICK TUTORIAL VIDEO:
Wish your website was easy to edit?
Most small business owners & entrepreneurs do! Find out how I can help.
