How to Add or Customize Dropdown Menu Arrows in Squarespace

A well-designed website starts with intuitive navigation. If you’re using Squarespace 7.1, you may notice that parent menu items, the ones with dropdowns, often don’t show any visible arrow indicators by default. This can lead to confusion for users who may not realize a menu item reveals additional pages.

Fortunately, with a few lines of custom CSS, you can easily add a dropdown arrow icon beside parent navigation links and style it to match your site.

In this guide, we’ll show you:

  • Why are dropdown arrows important

  • How to add them using CSS

  • How to style them for hover effects and mobile menus

  • How to replace text arrows with professional-looking SVG icons

Why Use Dropdown Arrows?

Adding an arrow to navigation items that contain subpages improves clarity and user experience.

Benefits:

  • Visual cue: Helps users understand that a menu item expands

  • Improved UX: Especially important on mobile devices

  • Modern design: Makes the navigation look complete and intentional

  • Accessibility: Clearer navigation for all types of visitors

How to Add a Simple Dropdown Arrow in Squarespace 7.1

Step 1: Open the CSS Panel

  1. Go to your Squarespace dashboard

  2. Navigate to Pages → Custom code → Custom CSS

Step 2: Paste the Following Code

Copied!

/* Add a simple dropdown arrow to menu items with subpages */
.header-nav-item--folder > a::after {
  content: " \2B9F";
  font-size: 1em;
  margin-left: 5px;
  color: inherit;
  transition: 0.2s;
}
/* Optional: Change arrow color on hover */
.header-nav-item--folder:hover > a::after {
  transform: rotate(180deg);
}
  

This CSS targets parent navigation links and adds a downward-facing arrow next to them. The arrow is fully customizable in size, spacing, and color.

Step 3: Save and Test

Click Save, then preview your site. You should now see a small arrow appear next to any navigation item that has dropdown content.

Customization Options

You can easily customize the arrow’s appearance:

Property Description Example
font-size Controls arrow size 0.75em, 1em, etc.
content Change the arrow symbol " ▼", " ▾", " ⯆"
padding-left Adjust spacing between text and arrow 5px, 10px
color Match your brand palette inherit, #000, var(--color-accent)

Advanced Option: Add a Custom SVG Arrow

For a more refined look, use a scalable vector graphic (SVG) as your dropdown indicator.

Copied!

/* Add a custom SVG arrow instead of text */
.header-nav-item--folder > a::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 100,0 50,60' fill='%23000'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}
  

This method is pixel-perfect and works well across all screen sizes.
You can change the color of the arrow by editing the fill value (%23000 = #000 black).

Add Arrow Support for Mobile Navigation

Some Squarespace templates hide subpage indicators on mobile. To fix that:

Copied!

/* Show dropdown arrows in the mobile navigation */
.nav-folder .nav-folder-title::after {
  content: " ▼";
  font-size: 0.75em;
  padding-left: 6px;
}
  

Make sure your mobile nav uses .nav-folder-title. Inspect your menu with browser dev tools if needed.

Troubleshooting

Issue Solution
Arrow not visible Confirm the menu item is a folder or has subpages
The arrow appears on all links Use the correct selector: .header-nav-folder > a
The arrow is too large/small Adjust font-size in CSS
SVG color wrong Replace the fill hex code with your brand color
Mobile not working Check for .nav-folder-title class and adjust accordingly

Final Thoughts

Adding a dropdown arrow to your navigation menu is a small design detail that makes a big impact on user experience. It signals hierarchy, encourages interaction, and adds polish to your Squarespace site, all without needing external plugins or advanced development.

Whether you choose a simple Unicode arrow or a custom SVG, the result is a more intuitive and professional-looking navigation menu.


Frequently Asked Questions (FAQ)


1. Why is there no dropdown arrow on Squarespace out of the box?

In Squarespace 7.1, there is frequently no visual cue for dropdowns to maintain clean navigation. However, this can be misleading for users who are not aware that a menu item has subpages.

2. Can I add dropdown arrows with no code only?

Nope, as of now, it’s not possible to add and style a dropdown arrow in Squarespace without writing a custom CSS.

3. What’s the difference between a text arrow and an SVG arrow?

  • Text arrows use characters like ▼ or ▾ and are simple to add.

  • SVG arrows are highly customizable, scalable icons that look sharper and cleaner.

4. Will there be dropdown arrows on mobile navigation as well?

Not always. A certain URL can hide the arrows on the mobile view using some Squarespace templates. You’d have to add some extra CSS to target a menu that’s for mobile, a menu that is .nav-folder-title.

5. How do I change the size or color of the arrow?

Use the font-size or background-size properties for size, and color or fill values (for SVGs) to match your branding.