How To Create A Dropdown Menu In Squarespace 7.1

When creating all of your website pages on Squarespace*, you might find your navigation getting super long or cluttered looking. This is when it’s a good idea to start introducing dropdown menus (or folders) into your site’s navigation.

Typically, it’s a good idea to have anywhere from 3-6 main navigation items on your website. You don’t want your website visitors getting easily overwhelmed by all of the different options presented to them immediately.

You’ll notice all of my Squarespace templates have about 5 main navigation items, some of them being dropdown menus. Those dropdown menus are usually categorized or grouped together based on whatever the pages are about. For example, I might have a “video gallery” page, a “client case studies” page, and an “our work” page. I would take all three of these pages and group them together under a “Portfolio” folder. This strategy helps keep your navigation super concise and easy for website viewers to scan.

In this guide, I’m going to walk you through the process of adding dropdown menus to your Squarespace website. It’s actually not super intuitive to figure out how to create dropdown menus in Squarespace, but it is very simple once you find the right spot to do so. Let’s get started!

---

*This post contains affiliate links. I earn a small commission when you click on the links and make a purchase. This comes at no additional cost to you. Affiliate links are marked with an asterisk.

---

How To Make A Drop Down Menu In Squarespace

1. Open up your website’s dashboard in Squarespace

2. Click on the Website tab from the left side menu

3. Click on the large plus sign (+) next to Main Navigation

4. In the pop-up menu, scroll down to More and select the Dropdown option

5. A new folder will be created, title the dropdown folder whatever you’d like and hit enter

6. Use the Add Page option to add as many pages as you need to your folder. You could also drag and drop pages that you’ve already created into the new folder

7. If you need to move the folder around in your site’s navigation, you can drag and drop the folder into place

8. For visual simplicity in your Squarespace dashboard, you can use the little arrow next to the folder to expand and collapse the folder items as needed

---

How To Change Dropdown Menu Colors

It can be a bit tricky to change the background color and link color for your dropdown navigation folders. These folders usually just inherit the same background color as your header, and the same link color as your navigation items. If you’d like your folder colors to be different from the default header styles, use the CSS below to customize.

1. Go to Website > Website Tools (bottom left corner) > Custom CSS

2. Paste the following CSS into the CSS field

3. Change the two hex color codes accordingly

4. Note: if your website has existing CSS, just paste the new CSS below what already exists

header.header#header {
.header-nav-folder-content {
    background: #154D57 !important;

    .header-nav-folder-item {
      a {
        color: #fff !important;
      }
    }
  }
}

---

How To Add A Down Arrow Next To Dropdown Folder Title

I love placing an indicator next to my dropdown folders to signal to the user that this is a folder that they need to hover over to view it’s contents. I typically will add a touch of CSS to my websites that add a little down arrow next to the folder title. Here are instructions for how to accomplish this:

Copy and paste the following code into your website’s custom CSS.

1. Go to Website > Website Tools (bottom left corner) > Custom CSS

2. Paste the following CSS into the CSS field and Save

3. Note: if your website has existing CSS, just paste the new CSS below what already exists

header.header#header {
.header-nav-item--folder .header-nav-folder-title::after {
    font-family: 'squarespace-ui-font';
    content: "\e009";
    vertical-align: middle;
    margin-left: 3px;
  }
}

---

How To Link The Folder Title To A Certain Page (Make Clickable)

Squarespace 7.1 dropdown folders are not clickable by default. This means that when you click on a folder title, nothing happens. This is sometimes fine but there may be instances where you’d like a click on the folder title to link to a certain page. Here are instructions for linking the folder title to a certain page:

Copy and paste the following code (with some tweaks) into your website’s code injection.

1. Go to Website > Website Tools (bottom left corner) > Code Injection

2. Paste the following code into the FOOTER field

3. Replace both instances of FOLDER-URL with the url of your folder (you can find the url of your folder by clicking on the little settings icon next to the folder and locating the URL SLUG)

4. Replace PAGE-URL with the url of the page you’d like to link the folder to

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<!-- link navigation folders to certain pages -->
<script>
  $(document).ready(function() {
    $(".header-nav-folder-title[href='/FOLDER-URL'], .header-menu-nav-item a[href='/FOLDER-URL']").click(function() {
      window.location.href = "/PAGE-URL";
    });
  });
</script>

Here’s an example of what this code should look like live in action. In the example, we’re linking the “About” folder title to the “Our Firm” website page.

---

Need A Mega Menu?

Sometimes more complex websites call for more in-depth navigation menus. Having too many static dropdown menus may become a bit inefficient for super large sites. If you have tons of website pages with a lot of different options and categories, I would recommend creating a mega menu. Here’s a step-by-step guide on how to create a mega menu on your Squarespace website.

---

Did you enjoy this article? Check out more articles like this in the Squarespace Blog. In the blog, I share tips for hiring Squarespace Designers (or becoming one!), custom CSS and Javascript solutions, latest Squarespace news and updates, my favorite plugins, Squarespace Template Shops, and more!

---

Browse Premium Squarespace Templates

My modern, service-based templates are designed for entrepreneurs and small businesses who are looking for a professional website design without breaking the bank. Each one of my templates includes my 10-module launch course (which walks you through every single step of customizing the template) and my Bonus SEO Crash Course (which outlines the exact techniques I use to help my SEO clients land on Google page 1).

---

More from the Squarespace Design blog …