How to Create a Dropdown Menu in Squarespace
Want to organize your Squarespace navigation without cramming every single page into your main menu? A dropdown menu is one of the easiest ways to tidy things up and make your site feel a whole lot easier to navigate!
Dropdowns let you group related pages under one navigation item, which is especially handy for things like services or blog categories. Instead of giving visitors a million link options to choose from, you can keep your main navigation nice and simple while still making everything easy to find.
Dropdowns are also really quick to set up in Squarespace, though the process and styling options are a little different depending on whether you’re using Squarespace 7.1 or 7.0.
Let’s dive in!
How to add a Dropdown Menu in Squarespace 7.1
Creating a dropdown menu in Squarespace 7.1 is SO easy!
Head to the backend of your Squarespace site and into your Pages panel
Click the + button next to Main Navigation
In the pop up, scroll down to the very bottom and click the Dropdown button
This will add a dropdown folder to your Main Navigation. It’s as easy as that!
Here, you’ll be able to rename your folder
To add existing pages into the folder, just drag and drop the pages from your pages panel
To add a link to an external page, anchor link, or blog post category, click + Add Page inside the folder, then select Link in the pop up panel and paste in the URL
How Dropdown Menus Work in Squarespace 7.1
On desktop, your dropdown links appear when someone hovers over the main dropdown title.
One important thing to know is that the main dropdown title itself isn’t a clickable page link. Its job is just to open the menu underneath it.
So if you have:
Services
Web Design
Branding
Template Styling
Visitors can click the individual services, but clicking Services itself won't take them to a Services page.
If you do have a main Services page you want people to visit, you can add a Services Overview page or something similar as the first link inside the dropdown. Alternatively, follow this code tutorial from Will Myers to make your dropdown main link clickable!
On mobile, your dropdown stays collapsed until someone taps it, which helps keep your mobile navigation nice and tidy too!
How to Customize a Dropdown Menu in Squarespace 7.1
The built-in dropdown styling options in Squarespace 7.1 are still fairly limited.
Changing the Dropdown Font
Your dropdown links use the same font as your main site navigation.
To edit the font:
Go to Site Styles by clicking the paintbrush icon in the top right corner of your site
Choose Fonts
Click into Assign Styles
Find Site Navigation
Adjust the font, size, and other typography settings.
Just remember that changing your site navigation font will affect your entire navigation, not only the dropdown!
Changing the Dropdown Colors
Dropdown colors are also connected to your header and site color settings rather than having their own completely independent design panel.
If your header is set to Adaptive (ie. it is transparent and takes on whatever the background of your site is), your dropdown’s color will be whatever the hero section’s color theme is.
If your header is set to a Solid color, your dropdown background will that same color.
You can adjust your header settings at anytime:
Go to Edit mode
Hover over your header and click the Edit Site Header Button
Then click the Edit Design button on the right
Go to the Color tab and select the style you want!
Adding a Dropdown Icon
Squarespace has recently added a built-in feature to add an icon next to your dropdown links. This can be helpful to let visitors know that more link options are available (as well as a cute design detail!).
To add a little icon next to your dropdown links:
Go to Edit mode
Hover over your header and click the Edit Site Header Button
Next, double click on your navigation links
In the Settings panel, switch to the Design tab
Here, you’ll be able to select an icon and style it!
Customizing Your Squarespace Dropdown Menu with CSS
If you want your dropdown to look a little more custom, you can use CSS to change things like the background color, spacing, text size and hover styles.
To easily access the CSS panel, hit the ‘/’ key on your keyboard while on the backend of your site and type in CSS in the search bar. Click on Custom CSS and you’ll be taken straight there! Then paste in any of the code below:
Change the dropdown background color
.header-nav-folder-content {
background: #ffffff !important;
}
Simply replace #ffffff with your own color HEX code.
Add more space between dropdown links
.header-nav-folder-content a {
padding: 10px 20px !important;
}
Increase or decrease the px values depending on how spacious you want the dropdown to feel!
Change the dropdown text size
.header-nav-folder-content a {
font-size: 14px;
}
Increase or decrease the px value depending on how big or small you would like your dropdown links to be.
And voila! A much more customized dropdown without having to change the styling of your entire header.
Want more header navigation customization tips? Check out the posts below:
👉 How to Customize your Header Navigation in Squarespace 7.1 Fluid Engine
👉 10 Fun Customisations for Your Header Navigation Menu in Squarespace
👉 How to Create a Transparent Header Navigation in Squarespace
👉 How to add a Photo Slideshow Header to Your Squarespace 7.1 Website
👉 How to create a sticky header navigation in Squarespace
How to add a Dropdown Menu in Squarespace 7.0
Still using Squarespace 7.0? The basic idea is the same, but dropdown behavior and styling can vary depending on your template family.
Head to the backend of your Squarespace site and into your Pages panel
Click the + button next to Primary Navigation
Select Dropdown in the pop up
Drag your pages into the folder or add a link to link to any external pages, anchor links, or blog categories.
Adding Index Pages Inside a Dropdown Menu in Squarespace 7.0
In Squarespace 7.0, some pages are restricted from being dragged into the folder. These are typically index pages. Luckily, there is a workaround!
To include Index pages within your drop-down menu folder:
Drag the main Index Page to the Not Linked section within your Pages panel
Click the + icon in your folder and add a link
Add the page name
Click on the cog icon to open up your link settings and choose Pages, then choose your original Index page from the list of pages.
This creates a navigation link to the Index Page without needing to physically place the Index inside the Folder.
Dropdown Menu Behavior in Squarespace 7.0
Your dropdown menu behavior may vary slightly depending on the Squarespace 7.0 template used. For example, in Brine, clicking on the top folder link will take you to the first drop-down link.
But in other Squarespace 7.0 templates, this may behave differently again, as each template family as different functions in Squarespace 7.0.
How to Customize a Dropdown Menu in Squarespace 7.0
In Squarespace 7.0, you can change the folder color, alongside the text color and font style of the dropdown menu. There is one main panel where you can make all of the changes:
Click Design > Site Styles
Scroll down to Header Primary Navigation and then into Folder Settings
Here, you can change the colors, and your fonts are based on header primary navigation fonts. Changing these settings will make a sitewide change to the header navigation.
And that’s it! Dropdown menus are such a simple way to make your Squarespace site feel more organized and easier to use, especially if you have a few different pages to group together. Once you’ve got the structure sorted, you can keep it nice and simple or add a little custom styling to make it feel more on-brand!
Loved that post? Check out some more design tips below!
How to create a vertical line in Squarespace (7.0 & 7.1)
How to create a full width Instagram feed in Squarespace 7.1
Creating an “as featured in” logo bar on Squarespace
How to add a button to your header navigation in Squarespace
If you liked this post, Pin it to Pinterest! 👇🏻
