3 Squarespace Navigation Plugins That Make Menus Better
Squarespace navigation is simple. You add links to the Pages panel, move them into the Main Navigation area, and it works.
That simplicity is one of the reasons I love Squarespace. It also makes the site easier to hand off to a client. They can see where the links live and update them without learning a strange new system.
The tradeoff is that the built-in layout options are limited. You get normal links and a one-level dropdown. For many sites, that is enough. But sometimes you need another level of organization, a full desktop menu, or a larger dropdown with a custom layout.
So I built three Squarespace navigation plugins that add those options while keeping the editing process familiar.
1. Add another dropdown level with Nested Menu Dropdowns
Squarespace folders give you one dropdown level. The Nested Menu Dropdowns plugin adds one more.
For example, you could create a Locations folder, add North America inside it, and then place a group of city links under North America.
The setup stays inside the normal Squarespace Pages panel:
Add your main folder.
Add the link that will contain the nested items.
Put two dashes at the start of each nested page title.
Those two dashes tell the plugin which links belong in the second dropdown level.
Later, you or your client can create another link, add the two dashes, and drag it into place. You still use the built-in Squarespace interface to manage the navigation.
See Demo (pw: demo)
2. Build a full desktop menu with the Mega Hamburger Menu
The Mega Hamburger Menu plugin places a hamburger button in the desktop header. When someone opens it, the plugin displays a page section from a normal Squarespace page.
You add the URL for that menu page in the Custom CSS area. The page can contain the layout and links you want to show inside the desktop menu.
You can also use a different page on mobile. That gives you room to build a larger desktop experience without forcing the same layout onto a smaller screen.
I like to keep the source pages together in a Menus folder, but you do not have to organize them that way. The important part is that the menu content lives on normal Squarespace pages. You can edit those pages with the tools you already use, and your client can do the same.
See Demo (pw: demo)
3. Turn a page section into a mega menu
The Mega Menu plugin is my most popular navigation plugin.
It lets a navigation link open a custom mega menu that pulls its content from another Squarespace page. The link can still point to its normal destination. In the video, the Journal link uses `/journal#wm-mega=/journal-menu`. The first part points to the Journal page, and `#wm-mega=/journal-menu` tells the plugin which page to use for the menu.
For example, a Journal link can open a mega menu built on a page with the URL `journal-menu`. If you want to change the layout, you edit that page like any other Squarespace page. Move a block, change an image, or rebuild the section in Fluid Engine. The updated layout appears in the menu.
This gives you much more room than a standard dropdown without changing the editing process.
See Demo (pw: demo)
Which Squarespace menu plugin should you use?
Choose Nested Menu Dropdowns when you only need one more level inside the standard navigation.
Choose Mega Hamburger Menu when you want a hamburger button on desktop and a full page section inside the open menu.
Choose Mega Menu when you want individual navigation links to open large, custom dropdown panels.
The three plugins look different on the front end, but they share the same useful idea: the content stays in familiar parts of Squarespace. That makes the menus easier to build, update, and hand off.
Browse all Squarespace navigation plugins and choose the one that fits your site.
Keep building.
