Knowing how to create a drop down menu in Squarespace is a great power to streamline your website’s navigation and keep your layout clean. In this guide, we’ll walk you through setting up folders, adding subpages, and organizing your menu for an intuitive user experience.
Understanding Squarespace Menu Structure
Before building drop down menus, it’s essential to grasp how Squarespace organizes its navigation. The platform uses a simple hierarchy based on folders and pages.
- Top-level navigation: The main menu items shown in your header.
- Folders: Used to group multiple pages under a single main link.
- Subpages: Also known as child pages, they live inside folders and appear as drop down items.
Create a Folder for Drop Down Navigation
To add a drop down menu, you must start by creating a folder in your main navigation panel. Here’s how:
- Log into your Squarespace dashboard and go to Pages.
- Under Main Navigation, click the + icon.
- Select Folder from the options.
- Give the folder a name — this will be the main menu item.
Add Pages Under the Folder (Submenus)
After creating the folder, it’s time to populate it with the pages that will appear in the drop down list.
- Click on the folder you just created.
- Click + and choose Page or Link depending on your need.
- Repeat to add multiple child pages.
These child pages are what users will see when they hover over or click the folder label in your website's navigation.
Customize Navigation Order and Structure
Drag and drop menu items to arrange their order under the folder. This allows you to control how the drop down appears.
| Action | Effect |
|---|---|
| Move item into folder | Makes it a child page (drop down) |
| Drag item out of folder | Promotes it to top-level navigation |
| Reorder items in folder | Changes their drop down sequence |
Design Header Menu with Drop Down Options
Your Squarespace template automatically formats folders into drop down menus in the header. However, you can fine-tune the appearance:
- Navigate to Design > Site Styles.
- Choose your template’s navigation style (dropdown, inline, etc.).
- Adjust spacing, font size, and hover effects.
Templates like Brine and Bedford offer robust support for stylish drop down menus.
How to Link External or Internal Pages in a Drop Down
You’re not limited to only pages inside Squarespace. You can link to external websites or different sections of your own.
To link an internal page:
- Click + in the folder, then choose Link.
- Enter the internal page URL or select it from the list.
To link an external page:
- Use the same process, but paste the full external URL.
- Set it to open in a new tab if needed.
Tips for Organizing Drop Down Menus
Organizing your drop down menus effectively can significantly improve how users interact with your website. A clean and thoughtful navigation structure not only enhances user experience but also supports your content strategy and SEO efforts.
Keep it minimal. Avoid adding too many items within a single drop down — this helps visitors focus and prevents visual clutter.
Group related pages. Place similar pages (e.g., services, products, or categories) within the same folder to create intuitive clusters.
Use descriptive labels. Make each menu item clear and self-explanatory, so users know exactly what to expect when they click.
Test mobile layout. Always preview your navigation on mobile devices to ensure that the drop downs convert properly into collapsible menus or hamburger icons.
Avoid empty folders. A folder without any child pages will still appear in the navigation but won’t trigger a drop down, confusing users.
Keep the names short. Use concise titles for menu items to avoid horizontal overflow, especially on mobile or narrow viewports.
Order strategically. Place the most important or most visited pages near the top of your drop down for better visibility.
Be consistent. Maintain uniform structure and naming conventions across all your folders and submenus for a professional appearance.
Audit your navigation regularly. Over time, remove outdated links or reorganize content to reflect changes in your website’s focus.
Use icons or indicators (if possible). Some templates support small visual markers next to drop down items — these can subtly enhance clarity.
Troubleshooting Common Drop Down Issues
If your drop down isn’t appearing or behaves incorrectly, check the following:
- Folder placement: Must be in Main Navigation, not Not Linked.
- Template support: Some older templates have limited navigation features.
- Too many items: Overcrowded menus may not render properly.
Useful Links
Adding Pages to Your Navigation – Learn how to add folders, pages, and links to your site's navigation menu.
Moving Pages Around Your Navigation – Discover how to rearrange and organize your site's navigation structure using drag-and-drop.
Styling Navigation – Customize the appearance of your site's navigation, including fonts, colors, and spacing.
Adding Links to Your Site – Learn how to add internal and external links to your site's navigation and content.
Dropdown Display by Template – Understand how different templates handle dropdown menus and navigation styles.
Enhance Your Squarespace with Powerful Plugins!
Elfsight created dozens of useful plugins to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Squarespace!
Conclusion
Adding a drop down menu in Squarespace is straightforward when you use folders and child pages effectively. With clear organization, intentional design, and thoughtful linking, you’ll create a polished and intuitive navigation experience for your visitors. Whether you're building a portfolio or an online store, a well-structured menu enhances usability and supports your website's goals.
