Adding Dropdown Menus in Squarespace
TL;DR:
- Add dropdown menus through the Pages panel by selecting "Dropdown"
- Dropdowns group related pages but can't contain content themselves
- Customize dropdown icons and backgrounds in Squarespace 7.1
- Deleting a dropdown removes its pages, but you can restore them within 30 days
- You can only create one level of dropdowns – no nesting allowed
Creating dropdown menus in Squarespace helps organize your site's navigation and group related pages together. Here's how to set them up and customize them properly.
Creating Your First Dropdown Menu
Setting up a dropdown menu is straightforward:
- Open the Pages panel in your site editor
- Click the + icon to add a new item
- Select "Dropdown" from the options
- Give your dropdown a clear name that describes the grouped content
- Add pages by dragging existing ones into the dropdown area or clicking "Add Page" to create new ones
Remember that dropdown menus act as containers for pages. They don't hold content directly – they're just organizational tools for your navigation.
How Dropdowns Display on Different Devices
Your dropdown menus will behave differently depending on how visitors access your site:
Desktop Experience
Dropdowns open when someone hovers over them. In Squarespace 7.1, you can add custom icons next to dropdown titles by going to Edit Site Header and accessing the Design settings.
Mobile Experience
Mobile users see a small arrow icon next to dropdown menus. They need to tap the dropdown to see its contents. This arrow icon can't be customized.
Styling Your Dropdown Backgrounds
The background of your dropdown menus depends on your header style:
- Solid headers: The dropdown background matches your header's background color
- Gradient headers: Dropdowns follow the same gradient pattern as your header
- Adaptive headers: The background color matches the first section of whatever page you're currently viewing
Always check how your dropdowns look on both desktop and mobile after making changes.
Managing and Deleting Dropdowns
When you need to remove a dropdown menu:
On Desktop: Hover over the dropdown name and click the trash icon, then confirm the deletion.
On Mobile (7.1 only): Tap the dropdown, select the trash icon, and confirm.
Be careful here – deleting a dropdown also removes all the pages inside it. The good news is you can restore deleted pages within 30 days if you make a mistake.
Important Limitations
Squarespace dropdown menus have some restrictions to keep in mind:
- You can't create nested dropdowns (dropdowns within dropdowns)
- Index pages can't be added directly to dropdown menus
- Some customization options are limited, especially on mobile devices
FAQs
Can I create dropdown menus within other dropdown menus?
No, Squarespace only supports one level of dropdown menus. You can't nest them.
How do I change the dropdown icons?
In Squarespace 7.1, go to Edit Site Header, then Design settings to choose from available icon options. This only works for desktop views.
What if I accidentally delete a dropdown?
Don't panic. While the dropdown and its pages disappear immediately, you can restore them within 30 days through your site's page recovery options.
Do dropdown menus affect my site's SEO?
Dropdown menus themselves don't hurt SEO, but make sure your site structure remains logical and all important pages are easily accessible.
Jargon Buster
Dropdown Menu: A secondary navigation menu that appears when you hover over or click a main navigation item.
Index Page: A special type of Squarespace page that displays multiple sections in a single scrolling layout.
Header Style: The design approach for your site's top navigation area, which affects how dropdown menus appear.
Pages Panel: The editing interface in Squarespace where you manage your site's page structure and navigation.
Wrap-up
Dropdown menus are a simple way to organize your Squarespace site's navigation without cluttering your main menu bar. While they have some limitations, they work well for grouping related content and keeping your navigation clean. Take time to test how they look and function on different devices, and don't be afraid to reorganize them as your site grows.
Ready to take your Squarespace skills further? Join Pixelhaze Academy for in-depth tutorials and expert guidance.