How to Create a Dropdown Menu in Squarespace
As your website grows and you add more important pages, keeping your navigation organized becomes important for both the look of your site and the experience for your visitors. Squarespace makes it easy to manage this with dropdown menus.
So, in this guide, we’ll walk you through how to add a dropdown navigation menu to your Squarespace site, making it simple to create a user-friendly, clean design.
How to add a dropdown menu in Squarespace
Luckily, adding a dropdown menu to a Squarespace website can be done in just a few simple steps:
Open the Pages panel and click the + icon.
Choose Dropdown.
Name the dropdown folder.
Drag the pages you want to show up in the dropdown into the dropdown folder.
Save your changes.
How to add an arrow to the dropdown menu
To add an arrow next to the dropdown, do the following.
Open the Custom CSS panel. (Pages panel > Website Tools > Custom CSS)
Paste in the following code:
a.header-nav-folder-title:after {
content: '\e009';
font-family: 'squarespace-ui-font';
position: absolute;
top: 3px;
}Save your changes.
There are other arrow styles you can implement by changing the content variable.
For example “\e00a” looks like this.
And “\e00b” looks like this.
Customize the dropdown menu
Squarespace’s dropdown menu styling can be a bit simple, but if you want to customize it to make your site stand out, there are things you can do with some easy CSS tricks. For each of the modifications, you’ll paste in the CSS code in the CSS editor.
Change the background color
To adjust the background color of your dropdown menu, you can use the following code:
.header-nav-folder-content{
background-color: #FFFFFF !important;
}
This changes the background color to white. You can replace #FFFFFF with any hex color code to match your site’s theme.
Change the gradient background color
If you prefer a gradient effect, you can use this code:
.header-nav-folder-content{
background:linear-gradient(to bottom, #73A2C3,#FFFFFF)!important;
}
This creates a gradient that transitions from the first color to second. Adjust the color codes to customize the gradient effect for your brand.
Change text alignment
To center-align the text within your dropdown menu, use the following CSS:
.header-nav-folder-content{
text-align:center !important;
}
This centers all menu items for a more balanced look. But you can change the text-align variable from center to left or right if you'd prefer a different alignment.
Change background width
If you want to control the width of the dropdown menu, you can use the following CSS:
.header-nav-folder-content {
min-width: 100px !important;
}
This sets the width of the dropdown menu to 100 pixels. Adjust the min-width value to make the menu wider or narrower based on your design preferences.
Change the background shape
To give your dropdown menu rounded corners for a softer look, you can apply this CSS code:
.header-nav-folder-content {
border-radius: 15px !important;
}
The border-radius property rounds the corners of the dropdown. The higher the pixel value (e.g., 15px), the more rounded the corners will appear. You can experiment with different values to achieve the desired shape for your menu.
Why use a dropdown menu?
dropdown menus are a great way to keep your site organized and user-friendly, especially if you have a lot of content. Here are a few reasons why you’d want to use one:
Keeps things clean: If your site has a lot going on, a dropdown menu is a smart way to organize all that content without cluttering your navigation bar. This keeps your website looking clean while still offering easy access to all your content.
Helps visitors find what they need: Adding a dropdown menu helps visitors find the pages they need by grouping related content under clear, organized headings. It simplifies navigation by offering quick access to subpages without cluttering the main menu. This structure can make it easier for users to find what they’re looking for.
Great for a growing website: If your site has tons of pages, dropdown menus offer a flexible way to scale your navigation. You can easily add new links or categories without reworking your entire layout, so your site can grow without becoming chaotic.
Why not use a dropdown menu?
While dropdown menus can be helpful, they aren’t always the best option for every website. For example, dropdown menus that have too many options can overwhelm visitors. Users might feel lost or unsure of where to click, which will just lead to frustration. So, a simpler navigation might be a better choice if your site doesn’t have a lot of content.
With dropdown menus, some content might get buried and overlooked by visitors. Since users have to click or hover to reveal the options, important pages could remain hidden unless a user actively looks for them. This can lead to lower engagement on certain parts of your site. So, be careful about adding your most important pages to a dropdown, as you may be limiting how many people will see it.
Best practices for dropdown menus in Squarespace
Since we know that dropdown menus have pros and cons, let’s go over how to implement them in a way that doesn’t confuse your users and makes your site easy to navigate, which is the whole purpose of a navigation anyway!
Give your top menu a fitting name
The label for your main menu item should clearly describe what’s inside the dropdown. If the top item is vague or doesn’t match the subpages, visitors will be confused and might miss what they’re looking for. So, make sure the name is broad enough to cover everything in the dropdown but still gives users an idea of what they’ll find. For example, a label like "Services" works well if you’re listing specific services below it. Clear, intuitive naming is key to a smooth user experience.
Don’t add too many options
Keep your dropdown menus as concise as possible, as too many options can overwhelm visitors and make it harder for them to decide where to go. A general rule of thumb to follow is to not add more than 5 to 8 subpages. A general rule of thumb is to keep the number of links to five or fewer. The goal is to make navigation effortless, not overwhelming!
Put the more important pages first
In your dropdown menu, list the most important or frequently visited pages at the top. Visitors tend to skim menus quickly, so the page they pay the most attention to is likely the first one listed, and if you bury key pages at the bottom, they might go unnoticed.
Want to learn more?
Well, now you know how to add a dropdown to your Squarespace site! But do you want to learn more? Well, you can learn more about Squarespace, design, copywriting, SEO, and more on the blog! Here are some of our favorites!
130 Instagram caption hooks for your next post
Newsletter story ideas (and how to use them)
How to write a blog post: Step-by-step
Why SEO is important for business
40+ ways to increase your blog traffic
How to remove the header and footer from a Squarespace page
How to add a testimonial slider in Squarespace
