Simple Website Navigation Best Practices (+ Mistakes to Avoid)


Simplicity is the best policy, especially for brand and web designs.⁠

⁠I see so many websites that have tons of dropdowns or cluttered menu options without a clear call to action (e.g., “Contact Us”), and it makes me cringe.

In this blog, I list examples of six different Squarespace website navigation bar designs, how to choose your most important webpages to highlight, and three website pages not to include in your website navigation.

KISS: A design principle

Have you ever heard of the acronym KISS: “Keep It Simple Stupid”? (I like to replace the last “S” with “Silly,” but that’s just me). It’s a design principle notably coined by Kelly Johnson, an engineer in the Navy.

The purpose of this phrase is ultimately to elevate the principle of simplicity.

(Stay with me here).

In times of war, a basic mechanic didn’t have time to spend hours learning how the expert engineers designed a plane. They needed to repair the broken parts ASAP and get pilots back up in the air.

Now, dialing this back into website design.

Your website visitors aren’t looking to study your website, learn how it’s built, and discover each page’s content in great detail.

Most people land on a website looking for an answer to a burning question:

“How can this business (you) help me (the customer) resolve this thing (pain point)?”

It’s your job to guide visitors through your website’s content maze to get them an answer in the LEAST amount of clicks as possible.

How?

With a simple, directive website menu bar across the top of every page that highlights the most important pages you want visitors to click on. 

What Pages Should I Include in My Website Navigation?

Only your FIVE most important pagesthe pages that will drive visitors to take the desired action(s)—should be listed in your website navigation menu.

  • Do you want website visitors to make a purchase?

  • Explore your services, so they’ll contact you for a project quote? 

  • Browse your resources or gallery?

  • Learn more about your expertise by reading your blog?

  • Join your course?

5 Webpages to Include in Your Website Navigation

Here is my recommendation for the five website pages you need to include in your website nav:

  1. Services for service-based businesses (or Shop for eCommerce).

  2. About

  3. Portfolio (or Gallery for photographers and artists).

  4. Blog

  5. [ Contact ] ← This is your call to action button, which should stand out from the other four options on the right side of your website header navigation.

NOTE: This list will vary depending on your industry and website goals. The purpose of a simple website navigation menu is to keep the actions you want a visitor to take clear over cluttered.

Every page should be a means to an end.

Let me explain what I mean…

Call to action buttons are the most important website menu nav item

If you’re a photographer, your “Gallery” page (believe it or not) doesn’t exist to make your work look pretty. The goal of your Gallery page is to show off your expertise and encourage a visitor to contact you for more information on packages and pricing.

“Contact,” “Get Started,” “Work Together,” “Sign Up,” and “Book Your Spot” are all examples of a call to action – the primary goal of your website or page (e.g., the end).

The primary action you want someone to take while browsing your website should be a button on the right-hand side of your website navigation bar.

Buttons highlight the action more than a regular menu item that blends in; I’d argue that calls to action are the single most important item found on your website nav.

Plus, people are familiar with buttons hanging out on the right side of a website menu – if it ain’t broke, don’t fix it. If a website visitor can’t immediately find your contact button, “bye, bye lead.”

Your site navigation shouldn’t be the only place this call to action button is seen.

Let’s quickly refer back to the Gallery page example.

Instead of only showcasing photos (pretty, but purposeless), you should include a button somewhere on that page (or better yet, a whole section) that elevates a clear call to action: “Request package pricing” or “Book your special day.”

After someone has viewed all of your professional photos, now thoroughly convinced that you’re amazing, they can immediately get in touch with you by clicking that call to action button!

(Keep it simple silly.)

Include five (I’ll budge on six if you count the button) key pages in your website navigation bar—meaning don’t list every service as its own menu item. The website menu nav should highlight the pages people can visit to learn more about that category (e.g., Services) to dial in on what’s most interesting to them.

Squarespace Website Navigation Examples

Most of the following layouts are built-in to Squarespace, but they can be customized further using CSS.

squarespace-website-design-menu-navigation-layouts-logo-top.jpg
squarespace-website-design-menu-navigation-layouts-split-logo-center.jpg

^ This website menu layout does require CSS to get a second set of nav items to show up on the right side of the logo.

squarespace-website-website navigation bar design-left-align.jpg
squarespace-website-design-menu-navigation-layouts-logo-left.jpg
squarespace-website-navigation-design-center-nav.jpg
squarespace-website-website navigation bar design-right-align.jpg

Additional pages to include in your website footer

The other non-essential pages (aka not money-making) can go in your footer.⁠ Typically, these are more informational. A list of pages you may link in your website footer include:⁠

  • */Privacy-policy⁠

  • */Terms-conditions⁠

  • /Resources

  • /Gallery

  • /Careers

  • /Press

  • /Events

  • /Process

  • /Client-Portal⁠

  • /Individual-service-page(s)...etc.⁠

*Don't get me started on the importance of these pages...learn why your website might be illegal here.

3 Pages Not to Include in Your Website Navigation Bar

Are you ready for my unpopular opinion?

Don’t use FAQ or testimonial pages

I do NOT recommend listing /FAQs and /Testimonials as standalone pages (and certainly not in your homepage menu bar).

Why? ⁠⠀

⁠Because you should be sprinkling that golden content throughout your entire website, not letting it hide out on a loner page!⁠ It can be necessary for certain business models like the hospitality industry, but here’s what you can do instead…

Add relevant testimonials and FAQs to their corresponding service pages.

For example, I offer Squarespace web design and brand design services. I specifically list FAQs related to web design on my web design page, and the same goes for my brand design page.⁠

Incorporating dropdown FAQ boxes on your services pages is a great way to meet a potential client where they’re at in the buying journey and help them determine if you’re the right fit for their needs (and vice versa).

Now, the third page not to include in your website navigation design might come as a bit of a shocker for some.

Brace yourself…

#1 page not to include in your website menu bar: Home

That’s right; you should not list your homepage as an option in your website navigation bar. It simply takes up space and provides next-to-no value to a website visitor who’s already on your homepage!

Most website visitors know that if they click on your site’s logo, usually very apparent in the website menu, they can get back to the homepage.

Only include pages in your navigation that will lead people to the pages that direct visitors to take the desired action (e.g., “Contact us”).

Your homepage is a landing page, not a converting page; think of it as a portal. 

When someone lands on your homepage, they’ll most likely do one of two things: click a button to (1) learn more about your company or (2) explore your products/services. I recommend linking both your /Services and /About pages on your homepage for this reason, but that’s a blog for another time.

Website Navigation Best Practices

People don't spend much time on websites; less than 15 seconds at best, but I would argue it’s probably closer to half that. Either way, when someone lands on your website they’re looking for an answer, and they want to find it fast!

Website navigation tips to take with you:

  1. Include the pages that solve problems in your website navigation bar (and clear the other clutter).

  2. Add a call to action button on the right side of your website menu [“Get Started”].

  3. Sprinkle call to action buttons within lower-level pages, so people can contact you wherever they are on your website. Remember, every page is a means to an end.

  4. Seal the deal with kind words and strategically answered questions on the right pages to (1) save visitors time (2) provide social proof and (3) prevent redundant inquiries from flooding your inbox.

Does your website pass the "5 menu nav items only" test?⁠

If you’re looking to partner with a web designer to build a site from scratch or redesign a DIY site you made in a rush five years ago, I got you.

We’ll keep it simple, strategic, and stylish (of course). Contact Selah Creative Co. to get started on a website design project today!

DISCLAIMER: Some links in this post are affiliate links. This means that (at no extra cost to you) I may get a kickback for your purchase. Please know that I only promote products I absolutely love and regularly use!

Haley Ward

Hi, I’m Haley! Brand strategist and designer behind Selah Creative Co. – a boutique design studio empowering service-based small businesses and entrepreneurs with custom brand and Squarespace website designs. When I’m not deep into a design project, I’m writing poetry, designing a mood board, or learning something new.

https://selahcreativeco.com
Previous
Previous

How to Create an Instagram Landing Page on Squarespace 7.1

Next
Next

Why Your Website Might Be Illegal (& How to Fix It)