How to Add a Dropdown Icon to Your Header Menu in Squarespace
Adding small touches to your website can make a big difference in how visitors use it and how polished it feels. One recent update from Squarespace lets you add a dropdown icon to your header menu folders, making site navigation clearer for everyone. Not only does this improve visual cues for people browsing your site, but it can also make things simpler for those who use screen readers or keyboard navigation.
In this post, learn how to add and customize dropdown icons in both your desktop and mobile header menus in Squarespace.
The New Dropdown Icon Feature in Squarespace
This Squarespace update introduces a straightforward way to add a dropdown icon next to header menu folders. If you use folder navigation in your site header, a small icon can signal to users that clicking will reveal a submenu. Not only does this make your site look a little tidier, but it also helps people understand which menu items have extra options hiding underneath.
Why does it matter? Here’s what this upgrade brings:
Visual clarity: Icons show which menu items are expandable, catching the eye right away.
Better accessibility: Screen readers pick up on the icons, so users navigating with keyboards or assistive devices also know when more options are available.
Consistent experience: You can set different icons for desktop and mobile, making sure your menu fits any device.
How to Access the Header Navigation Settings
Here’s how to open the header navigation editor on your Squarespace site:
Go to Pages in your Squarespace website.
Open any page on your site.
Click Edit to start making changes.
Hover over the header section at the top of your site. A button labelled Edit Site Header will appear.
Click on Edit Site Header.
In the header editor, click the navigation area. A pencil icon will pop up next to your navigation menu.
Adding and Customizing the Dropdown Icon on Desktop
Squarespace lets you not just add an icon, but also style it to match your website. Here’s how to customize the dropdown icon for your desktop header:
After opening the header navigation editor, click on the pencil icon in your navigation section.
Go to the Design tab in the navigation settings.
Look for the Dropdown section. This is where you’ll find the new icon options.
Choosing Your Icon
Squarespace gives you a range of choices for your dropdown icon. You’ll see:
Arrows
Bullets or dots
Squares
Pick the icon that best fits your site’s look and vibe.
Customization Options
Once you pick your icon, adjust how it looks to fit your design. Here are the customization features to play with:
Size: Choose small, medium, or large. If those aren’t quite right, use the ellipse (…) to unlock precise sizing.
Thickness: Make the icon lines thinner or bolder.
Spacing: Control how close the icon sits next to your menu label.
Roundness: Adjust how rounded the icon edges should be.
Saving and Previewing
Once your icon looks just right:
Hit Save in the editor to apply changes.
Take a moment to preview your site. Look at the desktop header and check that the icon feels natural with your branding.
Customizing the Dropdown Icon for Mobile Navigation
Mobile menus have always included an arrow for folders in Squarespace, but now you can choose your icon and match it to your desktop design or go in a unique direction.
Here’s how to set up and style your dropdown icon for mobile:
Setting the Mobile Icon
Switch to mobile view in the site editor and click View Menu.
Click your navigation area and click on the pencil icon.
Head to the Design section.
Select Icon to view your options.
Desktop vs. Mobile Icons: What’s Different?
Independent: Your mobile dropdown icon is independent from your desktop icon. They don’t have to match, unless you want them to.
Customization: You can pick a new arrow, a different shape, or even use a bolder variant on mobile for better tap targets.
Personalizing the Mobile Icon
As with desktop, you can adjust:
Size: Choose small, medium, or large. If those aren’t quite right, use the ellipse (…) to unlock precise sizing.
Thickness: Make the icon lines thinner or bolder.
Spacing: Control how close the icon sits next to your menu label.
Roundness: Adjust how rounded the icon edges should be.
Saving and Previewing
Once your icon looks just right:
Hit Save in the editor to apply changes.
Take a moment to preview your site. Look at the mobile menu and check that the icon feels natural with your branding.
Conclusion
Dropdown icons are a simple way to make your Squarespace navigation more intuitive and accessible. By clearly indicating which menu items contain submenus, you'll help visitors navigate your site with confidence.
Take a few minutes to add these icons to your header navigation, your visitors will appreciate the clearer, more polished experience.
