How To Create A Drop-Down Menu In Squarespace

Creating a drop-down menu in Squarespace isn't the most obvious task especially if you're new to the platform but it possible with the use of Squarespace folders.

 
HOW TO CREATE A DROP-DOWN MENU IN SQUARESPACE (1).png

1. Go to Pages and add a new page by clicking the '+' in top right-hand corner of your navigation.

2. When the pop up appears with different page types, select 'Folder'.

Chloe Forbes-Kindlen How To Create A Drop Down Menu In Squarespace 6.png

3. Name your folder according to how you would like it to appear on your navigation bar. 

Chloe Forbes-Kindlen How To Create A Drop Down Menu In Squarespace 5.png

4. You can now drag in the pages you'd like to appear on the drop-down menu. 

Screen Shot 2018-08-05 at 13.27.58.png

Your navigation bar will now show your drop-down menu. Here's an example of how it will look.

Chloe Forbes-Kindlen How To Create A Drop Down Menu In Squarespace 7.png

 

Unfortunately, you can't have multiple levels in your drop down menu i.e. nested folders within folders. 

What To Do If You Require A Multi-Level Dropdown Menu on Squarespace

 

Some website templates come with primary and secondary navigations so depending on your template, it may be easier to segment your content this way rather than via a drop-down menu.

Another workaround is to create a page that links to other pages. For example, on this website, I decided to design a Tools and Resources page that linked to different tool categories. I then manually created a sidebar with links to each category too for simpler navigation. 

 

Example One:

Chloe Forbes-Kindlen How To Create A Drop Down Menu In Squarespace 1.png

This 'Resources' page does not have a drop-down menu.

Chloe Forbes-Kindlen How To Create A Drop Down Menu In Squarespace 2.png

I created these graphics in Canva to make this page more aesthetically pleasing that just having links.

hloe Forbes-Kindlen How To Create A Drop Down Menu In Squarespace 3.png

On the category pages, I used the spacing feature to create a sidebar on the otherwise blank page. From there, I shared links so that visitors could easily navigate between each category. Using the duplicate page feature helped to ensure each page looked consistent.

 

Example 2: Speyside Kitchen

Another example can be shown on Speyside Kitchen's website where they had too many menus to link in the navigation bar. Instead, they opted to create a page that linked to all their different menus.

 

Screen Shot 2018-08-05 at 13.09.43.png

These are just a couple of ways you can workaround the inability to use multiple-level dropdown menus in Squarespace. With Squarespace's easy to use, drag and drop systems, your customisation options are endless.

 


I hope you've found this valuable, thanks for reading. If you'd like even more strategies, tips and exclusive insights that I only talk about in email, be sure to sign up for my newsletter below.

Much love. 

Chloë xo