How to Add an Arrow to Dropdown Menu Items in Squarespace
If you’ve ever built a navigation menu using folders in Squarespace, you’ve probably noticed something odd: folders in your header look exactly the same as regular links. That means visitors won’t know a menu item has a dropdown unless they hover over it.
That’s not great for user experience—especially on larger sites or with mobile users. But the good news? With a tiny snippet of CSS, you can easily add a little down arrow indicator next to dropdown menu items in your header. In this tutorial, I’ll show you exactly how to do that step-by-step.
Watch the video
Check out the YouTube video below. 👇🏼
🧩 The Problem with Squarespace Dropdown Menus
By default, Squarespace folders (which contain dropdown links) don’t look any different than other top-level navigation links. That can be confusing for your visitors—they won’t know there’s a menu unless they hover over it.
What we want is a simple arrow symbol (▼) beside those dropdown items so users immediately know there’s more to see.
🛠️ How to Add the Arrow with CSS
Here’s how you can add that visual cue using Custom CSS in Squarespace:
Step 1: Go to Custom CSS
You can get there two ways:
Go to Pages > Website Tools > Custom CSS, or
Hit the forward slash key ( / ) on your keyboard and type “CSS” in the search bar.
Step 2: Paste in the CSS Code
Paste the following CSS snippet into the box:
a.header-nav-folder-title:after {
content: "▾";
}
✅ Note: That down arrow symbol (▼) can be replaced with any other character or icon if you prefer. Just keep it simple and readable!
This code targets only the items in your header navigation that are folders, and adds a down arrow right after the text.
💡 Why This Is Helpful
Improves usability by showing users where dropdowns exist
Better mobile experience (especially when hover states don’t apply)
Super fast and easy to implement
🏁 Final Thoughts
This little fix might seem small, but it makes a big difference in clarity and usability. Your visitors will now know exactly which menu items expand into more options—without needing to hover or guess.
If you found this tip helpful, be sure to subscribe to my newsletter below for more Squarespace tutorials, and if you'd rather have someone build your site for you, contact me here!
📨 Join my mailing list to get Squarespace tips & tricks right in your inbox
Your Designer
I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
