Create lists of links that appear when visitors hover over navigation text.

Use the dropdown feature to create drop-down navigation menus on your site. Dropdowns are sometimes called nested pages or sub-menus. On Squarespace, they were previously known as folders.

Each dropdown creates a single menu in your navigation. You can add multiple dropdowns for different menus, but it's not possible to nest a dropdown in another dropdown.

Watch a video

Add a dropdown

To add a dropdown:

1. Open the Pages panel and click the + icon.
2. Click Dropdown.
3. The empty dropdown will appear in the pages panel. Enter a title for the dropdown to display in the navigation.

Add pages to the dropdown

Dropdowns aren't pages and it's not possible to add content directly to them. Instead, when you add pages to a dropdown, they appear as menu items that "drop down" from your navigation when a visitor hovers over it.

To add an existing page to the dropdown, drag and drop it into the space below the dropdown. To add a new page, click Add Page below the dropdown. To change the order of the pages, drag and drop them within the dropdown.

It's not possible to nest dropdowns within dropdowns.

Dropdown URL

If you navigate directly to a dropdown's URL, it redirects to the first page in the dropdown. If the dropdown doesn't have any pages, you'll see "This folder does not contain any pages." It's not possible to change this text or add other content.

Index pages (version 7.0)

You can add any type of page to a dropdown except an index page. To direct visitors to an index page, choose Link, click Click to add URL, and use the Content tab to point the link to your index page. For more information about setting up links, visit Adding links to your site.

Dropdown display

How your dropdown displays depends on your site's version.

On version 7.1 sites:

• The dropdown's pages appear when you hover over the dropdown title.
• Clicking the dropdown title doesn't open the first page.
• The dropdown is collapsed on mobile and opens when tapped.

For version 7.0-specific information, see Dropdown display by template.

Background color

On version 7.1 sites, your dropdown background color depends on your header style:

• Solid - Background color follows either the Background color tweak in your header settings, or the site-wide Section Background tweak for the theme you select for the header. To change these, click Edit Header, click Edit Design, click the Color tab, then click either Color or Theme, depending on which color scheme you choose. 
• Gradient - Background color follows the Background color tweak in your header settings. To change this, click Edit Header, click Edit Design, then click the Color tab.
• Adaptive - Background color follows the site-wide Section Background tweak for the theme of the first section on the page. To change this, open site styles, click Colors, then hover over the theme the section uses and click the pencil icon.

For a list of the version 7.0 tweaks that set this color, see Dropdown display by template.

Delete the dropdown

If you delete a dropdown, its pages will also be deleted.

To delete a dropdown:

Tip: You can restore the pages within 30 days.

Product category nested menus (version 7.1)

Product categories create a separate navigation at the top of your store.

On store pages in version 7.1, you can create nested subcategory menus. To learn more, visit Organizing products.

Store pages in version 7.0 have a category navigation, but it's not possible to display nested subcategories.