How to Add a Dropdown Menu Icon in Squarespace 7.1

If visitors don’t realize that an item in your Squarespace header opens a dropdown menu, give it an arrow. In Squarespace 7.1 this is a built-in setting: in the design options of the header’s navigation links, pick an icon from the Icon menu, and every dropdown (what Squarespace used to call a folder) shows it on desktop. The mobile menu already shows an arrow beside dropdowns. Use custom CSS only if none of the built-in icons suits you: a CSS-only chevron needs no icon library and works on every plan.

How do you turn on the built-in dropdown icon?

Squarespace’s help article on adding dropdowns to your navigation describes the steps for version 7.1 sites: edit the site header, open the navigation links’ Design options and choose an icon from the Icon menu, or None for no icon. Depending on the icon, you can also set its size, thickness, spacing and roundness. The option doesn’t exist on version 7.0 sites.

On mobile, Squarespace shows an arrow beside dropdowns by default, and according to the same article you can’t change or hide it.

How do you add your own arrow with CSS?

Open the Custom CSS panel (Squarespace’s help article on using the CSS editor links straight to it) and add:

.header-nav-item--folder .header-nav-folder-title::after {
  content: "";
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  margin-left: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg);
}

• In the 7.1 header, each dropdown is an element with the class header-nav-item--folder, and its title is a <button class="header-nav-folder-title">. The selector targets that title.
• ::after adds an empty box after the title. Its right and bottom borders, rotated by 45 degrees, draw a down-pointing chevron, and translateY(-0.2em) lines it up with the text.
• currentColor gives the chevron the same color as the menu text, so it follows your header’s color settings.
• The sizes are in em, so the chevron scales with the navigation font size. Change the 2px borders for a thinner or bolder line.

If the built-in icon is also switched on, you’ll see both, so set the Icon menu to None first.

The earlier version of this post used the selector a.header-nav-folder-title. It no longer matches anything, because the title is now a button, not a link. On six Squarespace 7.1 template demo sites checked in September 2026, every dropdown title was a button with the class header-nav-folder-title. With the CSS above added, headless Chrome 153 drew the chevron after each dropdown title, in the menu’s text color.

How do you use a Font Awesome icon instead?

An icon font has to be loaded before CSS can use it. On Squarespace, that means adding its stylesheet in the Header field of the Code Injection panel, which is available on the Core, Plus and Advanced plans and some legacy plans. The Header field adds the code to the <head> of every page. The current free version, Font Awesome 7.3.1, can be loaded from the jsDelivr CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/css/all.min.css">

Skip this line if your site already loads Font Awesome 7. Then add this to Custom CSS instead of the chevron above:

.header-nav-item--folder .header-nav-folder-title::after {
  content: "\f107";
  font: var(--fa-font-solid);
  margin-left: 0.4em;
}

• \f107 is the code of the angle-down icon. Use \f078 for the chevron-down icon.
• font: var(--fa-font-solid) sets the font family ("Font Awesome 7 Free") and the weight of the solid style, as Font Awesome’s documentation on pseudo-elements shows.

In the same headless Chrome test, with the stylesheet loaded from jsDelivr, the angle-down icon showed after each dropdown title.

The earlier version of this post loaded Font Awesome 4.5.0, a version published in 2015, from maxcdn.bootstrapcdn.com, and set font-family: FontAwesome. That address still answers, but for a single arrow the CSS-only chevron is simpler, and it doesn’t need Code Injection or a plan that includes it.

How do you find the right selector?

If no arrow appears, check the class names on your own site:

1. Open your live site in Chrome or Edge, right-click a dropdown title in the header and choose Inspect.
2. The developer tools open with the element under the pointer selected. Find the element that holds the dropdown’s whole title and note its class, then the class of the element around the whole dropdown.
3. Build the selector from the two classes, add ::after, and try the rule in the Styles panel of the developer tools before you paste it into Custom CSS.

In 7.1 the header’s markup is in the page twice, inside header-display-desktop and header-display-mobile, and the two are never shown at once. A selector built from the classes matches both, which is what you want.

Squarespace 7.0 sites

Version 7.0 templates belong to template families with their own header markup, so the class names above may not exist on your site, and the built-in Icon option is only available on 7.1. Find your template’s classes with the inspector as described above, then use either CSS rule with your selector.

Related articles

• adding a dropdown arrow to a WordPress menu: the same idea with a PHP filter and CSS
• keeping parent menu items tappable on mobile: CSS for dropdown toggles and their arrows