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.

 
 

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

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

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

03 | 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 3.png
 

04 | You can now add pages into the folder or drag in the pages you'd like to appear on the drop-down menu. 

Please note that you cannot add an Index to a folder, only pages.

 
Chloe Forbes-Kindlen How To Create A Drop-Down Menu In Squarespace 4.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 5.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. 

A great example of this can be found on Elle & Company Design’s website (Another great Squarespace resource btw!). Elle has created one page that links to different tool categories through a manually-created sidebar navigation.

Option One:

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

These tools do not have a drop-down menu. Instead, the sidebar has been included on each ‘Tools’ page so that you can navigate your way through the different resources without clunking up the main navigation.



How To Create This

To create this yourself. all you need to do is add a space to the right or left of your content. You can adjust the horizontal width of your sidebar to your liking.

Under the spacing, you can then add in your navigation items via text and link them accordingly as you build out these pages.

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

You can then delete the space and the content will remain in place.

Using the duplicate page feature will help ensure each page looked consistent.

Once you have all your pages in place, ensure your navigation links correctly on all pages.

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

Now when the visitor clicks onto a page, they will be able to seamlessly click through your different content links through your sidebar navigation.

 

Option 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.

 
Chloe Forbes-Kindlen How To Create A Drop-Down Menu In Squarespace 9.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

chloe.png
 

Pin It For Later

How To Create  A Drop-Down Menu In Squarespace.001.jpeg
How To Create  A Drop-Down Menu In Squarespace.002.jpeg
 

Access More Squarespace Tutorials