How to add arrows or icons to folders in Squarespace

It is a good user experience to show a little hint that the navigation link opens a submenu. The most common way is to use an arrow icon for that.

Actually, Squarespace site uses that for their own submenus:

CSS icon (recommended)

The idea is to use :after for the icon. That way we can automatically match the color of the icon with the text color using currentColor property

CSS chevron

We can also use CSS to generate a basic triangle or chevron directly in the browser. It’s the easiest and most convenient way but the shape is pretty basic.

👍 will inherit the color

/*** Add chevron to folders ***/
.header-nav-folder-title {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

.header-nav-folder-title:after {
	border-style: solid;
	border-width: 1px 1px 0 0;
        border-color: currentColor; /* will inherit text color */
	content: '';
	display: inline-block;
	height: 6px;
  	width: 6px;
        transform: rotate(135deg);
  
	position: relative; 
  
	top: -2px; // adjust top disctance if needed
 
}


/* Rotate when hovered */
.header-nav-folder-title:hover:after  {
    transform: rotate(-45deg);
  
   top: 3px;// adjust top disctance if needed
}

CSS triangle

👍 will inherit the color

.header-nav-folder-title {
  display: inline-flex !important;
  align-items: center;
  gap: 4px; // adjust the gap
}

.header-nav-folder-title:after {
	content: '';
  display: inline-block;
  width: 0; 
  height: 0; 
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
 
  position: relative;
 
}


/* Rotate when hovered */
.header-nav-folder-title:hover:after {
    transform: rotate(-180deg);
    transform-origin: center center;
}

Custom icon or image with CSS

👍 use any icon

👎 will not inherit text color, adjustments will be need needed for dark backgrounds

Upload the image to your site in Custom CSS tab and copy the link.

Add this code to Pages › Website Tools › Custom CSS. Replace YOUR_IMAGE with uploaded file

.header-nav-folder-title {
display: inline-flex !important;
align-items: center;
gap: 4px; // adjust the gap
}

.header-nav-folder-title:after {
content: '';
display: inline-block;
width: 12px;
height: 12px;

background: url(YOUR_IMAGE) no-repeat center ;
background-size: contain;
}

/* Rotate when hovered */
.header-nav-folder-title:hover:after {
transform: rotate(-180deg);
transform-origin: center center;
}