How to Add Dropdown Menus in Squarespace Navigation

Last Edited Time

Jun 25, 2025 09:35 PM

Do not index

Suggested Tag

squarespace

dropdown menus

squarespace navigation

Tags Synced

AI summary

Adding dropdown menus in Squarespace navigation is easy and helps organize content. Customization options include icons and background colors, but deleting a dropdown removes all associated pages. Remember, dropdowns cannot be nested and index pages cannot be added in version 7.0.

Last edited by

Platform

Squarespace

Key Points

Adding dropdowns to Squarespace navigation is straightforward

Dropdowns can display multiple sub-menu items but cannot be further nested

Customisation options include icons, background colours, and mobile display settings

Deleting a dropdown also removes its associated pages, so proceed with caution

Dropdown menus (or sub-menus) help organise your website by grouping related pages under a single navigation heading. They keep your main navigation clean whilst making it easy for visitors to find specific content.

How to Add Dropdowns

Here's how to create a dropdown in your Squarespace navigation:

Open the Pages panel Click the '+' icon to start adding content.

Create your dropdown Select 'Dropdown' from the options. This creates a new dropdown menu in your navigation that you can rename.

Add pages to your dropdown Dropdowns don't hold content themselves. You need to add pages that will appear as items in the dropdown menu. Either drag existing pages into the dropdown or click 'Add Page' to create new ones.

Organise your content Drag pages within the dropdown to reorder them as needed.

Important Notes About URLs and Page Types

Dropdown URL behaviour: If someone visits a dropdown's URL directly, they'll be redirected to the first page listed under it. If the dropdown is empty, they'll see a default message.

Index pages in Version 7.0: You can't add index pages to dropdowns in Squarespace 7.0, but other page types work fine.

Icons (Version 7.1 only)

To change dropdown icons:

Go to 'Edit' mode

Select 'Edit Site Header'

Choose the icon design next to your navigation links

Adjust size and spacing as needed

Note: You can't change the icon shape, only size and spacing.

Background Colours

Your dropdown's background colour depends on your header style settings or site-wide colour scheme. Access these through 'Edit Header' and the 'Colour' tab.

Warning: Deleting a dropdown permanently removes all pages inside it.

To delete a dropdown:

Desktop: Hover over the dropdown and click the trash icon, then confirm

Mobile: The process varies slightly depending on your Squarespace version

Pro Tips

When planning your navigation, think about how dropdowns can organise content without overwhelming visitors. Use clear, concise titles and make sure all menu items are directly related to improve user experience.

Don't create dropdowns with just one page inside. It's better to have that page in your main navigation instead.

Common Questions

Can I nest dropdowns within dropdowns? No, Squarespace doesn't support nested dropdowns.

How do I customise dropdown icons? Go to your site header settings under 'Edit' to customise dropdown icons (7.1 only).

What happens when I delete a dropdown? All pages inside the dropdown are permanently deleted. You'll need to confirm this action as it can't be undone.

Can I add index pages to dropdowns? Not in Squarespace 7.0. Other page types work fine.

Quick Definitions

Dropdown: A menu that groups related content under one navigation heading Nested pages: Pages organised under a parent page, accessed via a dropdown Version 7.0/7.1: Different Squarespace platform versions with specific features Index page: A page type that groups several related pages for coordinated display

Summary

Dropdown menus can significantly improve your site's navigation by helping visitors find content more easily. Squarespace makes them relatively simple to set up, though there are some version-specific limitations to keep in mind. Follow these steps and you'll have a cleaner, more organised navigation system that guides visitors exactly where they need to go.

How to Add Dropdown Menus in Squarespace Navigation