How to Design a User-Friendly Navigation in Squarespace

Your main navigation acts as the map of your website. Think about how important that is for new website users who have stumbled onto your site for the first time.

Whether they’ve found a blog post of yours, your home page, your store listing page, or a product page, your visitors will utilize your main navigation menu to see how your website is laid out, what the most important pages are, and ultimately how they should navigate the rest of your site.

In this article, we’ll look at some important design aspects of a user-friendly navigation menu, and we’ll learn how to achieve these in Squarespace 7.1.

1. Include your site’s most important pages

Your site’s main navigation should be a representation of your website structure. This means it should include your most important pages that will act as anchors for your website visitors to utilize when navigating your site.

The pages you include in your site may vary depending on the type of website. For instance, a typical service provider’s site may include the following menu items:

• Home

• Blog

• Shop/Store

• About

• Contact/Work with Me

If you host a large-scale eCommerce store, your menu may have some basic pages like “Home” and “About,” but it might also include your store categories for easier access:

• Home

• Women’s Clothing

• Men’s Clothing

• Shoes

• Athleticwear

• About Us

The main thing to remember is that your menu should make it easier for your site visitors to navigate your site and take whichever action you ultimately want them to take. Squarespace allows you to include pages in your main menu using the Main Navigation section in Pages.

2. Use concise descriptive labels

Typically, we don’t have much screen real estate to work with when it comes to the main header menu, so it’s important to keep menu labels as concise as possible, while still making them descriptive enough for people to understand them.

Squarespace makes this easy by allowing us to specify a Navigation Title/Link Title, which is the label that shows in the main menu, and a separate Page Title, which is used for SEO purposes.

3. Try to stay at or under 7 top-level menu items

Because humans tend to digest information better in small amounts, it makes sense that our main navigation should be as short and simple as possible. This means we should strive to not overload our menu with lots and lots of top-level menu items (7 or fewer).

According to the Nielsen Norman Group’s article about how simplicity wins over an abundance of choices, “As the number of choices increases, so does the effort required to collect information and make good decisions. Featuritis can be an exhausting disease for users.” We can apply this concept to a website’s navigation menu; when the user is presented with an excessive amount of top-level menu items, it can be overwhelming for them to decide which page to visit, which can ultimately end in the user leaving your site if they get too confused.

If you find yourself wanting to add more than 7 to your menu, try to reevaluate which menu items are most important to your site structure, or consider moving some of the menu items to a dropdown menu.

4. Avoid excessively long dropdown menus

We should avoid adding dropdown menus that are excessively long with no type of organization.

We already covered how presenting a user with too much information at once can confuse them, which is bad for the user experience, and we applied that to top-level menu items. The same can apply to dropdown menus.

If your dropdown menu is too long, it can be equally overwhelming for a user, especially if there is no separation or organization among the links.

If you think your dropdown menus could use some better organization and are using a Squarespace 7.1 template, consider using one of our Mega Menu plugins below to add clear groupings or labels to your dropdown menus. They can accommodate large-scale content as well as small-scale content depending on which one you utilize.

5. Add a search bar to your navigation if you have a large database of information

If you are hosting a large-scale eCommerce platform or blog site, your site might benefit from adding a search bar to your desktop and mobile header so users can easily search for items they are looking for.

This is not possible to do with Squarespace’s native elements at the time this article was written, but it can be achieved with some custom CSS and Javascript. If you’re looking to see how this is achievable, check out one of my favorite client projects where I added a mobile-friendly search bar button to a Squarespace 7.1 website.

6. For eCommerce sites, add a shopping cart to your navigation

When customers are adding items from your store to their cart, they need a way to access the cart. The easiest way to do this is to add a shopping cart to your header, so they can see how many items have been added to their cart and they have a way of going to the checkout page.

Squarespace allows us to easily add a shopping cart to the header using the Elements section in the Global header settings.

BONUS: CSS customizations for your navigation menu

While Squarespace provides us with the basic elements to make a user-friendly navigation menu, there are a few CSS customizations that can increase the user-friendliness of our menu, including:

• Add hover effects for menu item links

• Add dropdown indicators for dropdown menus

• Increase padding of dropdown menu items

• Add border around dropdown folder menus

• Increase padding of menu items when wrapping to the second line

• Adding a slight transition delay for hover menus for accessibility purposes

To access these CSS code snippets, check out my blog post 7 CSS Snippets That Will Improve Your Squarespace 7.1 Navigation