How to Create Custom Navigation Links for Folders in Squarespace

Drop down menus are great to use when you have a ton of information related to that specific topic, but that don’t necessarily need to be on the same page. However, sometimes the issue here is that when you click on that link initially, it will take you to the first page that appear nested below it.

Here is a quick fix on how you work around this, and have your initial link navigate your users to a specific page that is not directly listed within the drop down menu.

 

STEP 1:

Start out by navigating to ‘PAGE’ from the main navigation. Then open the page settings for the Folder page. You should see a similar window as the one below.

How to create a custom navigation link for the folders in Squarespace

STEP 2:

Since you can’t use the same URL Slug that is on a previous page, we’ll need to create a whole new link within the Navigation title. You will want to copy the HTML code referenced below, then paste it in the ‘Navigation Title’ area.

<a href="/URL-SLUG-GOES-HERE">Navigation Title</a>
How to create a custom navigation link for your folder navigation pages in Squarespace - SquareCode HQ

Let’s break down the fist part of this code:

< - means we are opening the html code;

a - means you are targeting a link;

href=”/URL-SLUG-GOES-HERE“ - means you are creating a hyper link that will take you to the page with the URL Slug /about. You will always find the URL Slug in between quotation marks (“ “);

> - means you are closing the styling elements of the link html code;

Navigation Title - This is the name of your Folder;

</a> - means this is where your hyperlink ends. This means only your Navigation Title will include the link you just referenced.

STEP 3:

Click SAVE and test your menu & make sure your new link is working