Adding Mega Menus in Squarespace 7.1 - Accessible and Responsive
A mega menu has become a staple UX element in many modern websites for good reason: it displays large, copious amounts of user choices in a segmented, more digestible way. This optimizes the user’s ability to navigate your site, and find what they need, fast.
The Nielson Norman Group defines mega menus as “large, rectangular menus [that] group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices.” When implemented the right way, a mega menu can add real value to your website’s user experience.
If you’ve ever tried other Squarespace Mega Menu Plugins on the market, you may or may not have noticed 2 major issues with them:
Other Mega Menus are not truly responsive (mobile-friendly).
If you know anything about modern website browsing trends, you know this is a big deal! 68% of all global website visits came from mobile devices in 2020 compared to 28% who used desktops according to the Google Analytics Benchmarking feature, which provides aggregated industry data from companies that share their data with Google Analytics, and according to a 2018 consumer UX survey by Clutch, 94% say easy navigation is the most important website feature. Combine those fairly recent statistics with a non-responsive mobile menu and you have a pretty good chance of giving your mobile site visitors a poor browsing experience.
Other Mega Menus are not web-accessible.
This one is another crucial element of navigation in particular. Web accessibility is not just a trendy word - it’s the act of ensuring websites and web tools are properly designed and coded so that people with disabilities can use them. (defined by W3C). In terms of navigation, it means that the navigation can be accessed via the conventional access keys (to learn more about mega menus and web accessibility, check out my article How to Make Your Squarespace Mega Menu Web-Accessible, which outlines exactly how to make a web-accessible mega menu in Squarespace).
Believe it or not, you can actually get sued for having an inaccessible website, much like companies can get sued for not having accessible doors or ramps at their establishments (learn more by reading Title III Lawsuits: 10 Big Companies Sued Over Website Accessibility.) Outside of the fact that hosting a non-accessible website can cost you money, just imagine the frustration of not being able to navigate a website easily in this age of technology when almost everything happens online! Ensuring people of all abilities are able to navigate your website with ease is one important way in which website owners can create a more inclusive online world for everyone.
This blog post will walk you through how to easily add a mega menu to your Squarespace 7.1 site using the Mega Navigation Menu Plugin, complete with a mobile-friendly view and a completely keyboard-accessible menu.
Add folder content for the mobile menu
Before you begin, you will need to purchase the plugin, add the provided code snippets to your website, and then customize your menu settings using the installation guide.
1. Add a folder menu item to the Main Navigation section.
The Page Title and Navigation Title of this folder menu item can be whatever you want it to be. The URL slug, however, needs to be appended with the string “-mega”.
2. Add a menu item inside the folder you just added. This could be either a Page Link or a Page.
3. Make the Link Title or Navigation Title (depending on if you added a Page Link or a Page, respectively) whatever you want your section to be labeled.
OPTIONAL: If you want your menu to contain menu groupings, append “ - Header” to the end of the menu item’s navigation/link title. That’s “space”, “hyphen”, “space”, and the word “Header”. For example, “Activewear - Header”. If you are editing Page settings and not Page Link settings, make sure you do NOT append “ - Header” to the Page Title, because this is what will show in Google search results - you only need to append that text to the Navigation Title. See the image below for reference.
This is how the folder content you add relates to the mega menu on mobile devices.
Add the desktop menu content
4. In the “Not Linked” section of your pages, add a blank page. Make sure to hide this page from the search results, but do not disable it.
5. Make the title of this page something that clearly labels this as mega menu content for the corresponding navigation item. In our example of “Women’s Clothing,” a good name for this page is “Women’s Clothing - Mega Nav Content.”
6. Give this page a URL slug that matches the slug of the corresponding folder menu you just added, but remove the “-mega” that was appended earlier. For example, if the corresponding folder URL slug is “/womens-clothing-mega”, the slug of this page needs to be “/womens-clothing”.
Customize your mega menu with the Squarespace drag n’ drop editor
Now comes the fun part - adding the menu content!
7. Open the page editor of the page you just created, and add only 1 section. Within that page section, add your content using Squarespace’s native elements, and drag n’ drop them into a structured row layout. The only elements that will work with this plugin are text, links, and images, but luckily, these elements are the only elements you need to make a comprehensive menu.
Keep in mind that the mega menus are not meant to be scrolled through - everything needs to be displayed to the user without them having to scroll. Because of this, you should limit the rows you add to no more than 3, and make the section height as small as possible if you have lots of content. See the below picture as an example.
8. Repeat steps 1-8 for as many mega menus as you want to add.
Available customization options
The cool thing about this plugin is that it comes with some pretty unique and helpful customization options, including:
Making the menu appear on click or on hover
Making the mobile menu group headings have links or not
Making the mega menus full width or not
That’s it! After you save your changes, you should be able to view the desktop menu by clicking on the respective menu items, and the mobile menu by opening the mobile hamburger menu and the corresponding folder menu.
If you found this tutorial helpful and easy to implement on your own site(s), learn more about what makes this mega menu superior to other mega menus on the market.
