How to Add or Customize Dropdown Menu Arrows in Squarespace

Jul 8

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

Go to your Squarespace dashboard
Navigate to Pages → Custom code → Custom CSS

Step 2: Paste the Following Code


/* 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.


/* 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:


/* 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.