Guide: Add an arrow to drop down menu on Squarespace

When it comes to creating your header menu on Squarespace, you may opt for just one link, a folder link (aka a drop down menu) or a mix of the two.

For example your menu may include the pages, Home, About, Products and Contact. Whilst Home, About and Contact may be just a simple link to another page, Products may be a folder link, meaning when a user hovers over it, a drop down menu of subpages appears.

The problem however is that there’s no way for a user to know whether the link is a single link or a folder link until they hover over it.

Adding an arrow to the folder links is a great way to add some differentiation between the two but how do you do that? Keep reading to find out…

Watch the video

Check out the YouTube video below 👇

How to add an arrow to a drop down menu on Squarespace

First of all, navigate to Design > Custom CSS. 

You then need to add in the following code to your custom CSS panel:

a.header-nav-folder-title:after {

content: "\e009";

font-family: 'squarespace-ui-font';

position: relative;

top: 2px;

}

Now, let’s break down exactly what that code means.

Firstly we’re signalling to Squarespace that we want to target the space after the menu item. The number after the the content section refers to the symbol (aka the arrow) that you want to display whilst the next line refers to the font family you’re using for your menu.

Adding ‘position;’ relative meanwhile gives us control over where the arrow appears in alignment with the text.

You can have a play around with the top and transition pixels to achieve your desired appearance.

---

📩 Join the inner circle to get exclusive code updates

---

Adding in this next bit of code after the above will also ensure that your folder link, and it’s new arrow, sit in alignment with the rest of your menu items:

.header-nav-folder-title {

margin-top: -2px !important;

}

Hit save and you’ll have added a simple arrow to the folder link(s) in your drop down menu. 

Whilst it’s certainly not essential to add an arrow to your drop down menus, it is a great way of improving the overall user experience and navigation of your Squarespace website.

If you found this useful don’t forget to bookmark the article, share it online and check out the rest of the by Crawford Squarespace tutorials. 

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?