Making It Know
Back

Building Your Website: Basic Site Navigation

When you’re launching your website, it’s a good idea to think about how you want people to interact with your online presence. That’s where navigation design, which enables visitors to move around your website, comes into play. Whether you’re starting a blog, selling online, or creating a portfolio of your work, site navigation can make or break the effectiveness of your website.

Learn everything you need to know about website navigation design, including best practices and examples to help you build an online presence that serves you and your visitors.

What is website navigation design?

Navigation design is the sum of all the elements that people use to navigate a website. It includes everything from your website’s main menu, to CTA buttons and copy, hyperlinks, and how you design your page layouts. The more user-friendly your website is, the more people will want to stick around and start building a relationship with your brand — which is why good navigation design is so important.

When it’s done right, navigation UX (user experience) is intuitive. Ideally, visitors will have such an easy time finding what they need that they won’t even think about the navigation design of your website. If your site has ineffective navigation design, it might mean that people leave because they can’t find what they’re looking for, which will result in fewer interactions with your products and offerings.

Every Squarespace website template sets you up for success with built-in navigation and optimized UX.

Best practices for website navigation

There isn’t one right way to approach website navigation, but there are best practices to guide you as you build, test, and evolve your website structure:

Lead with your goals

Is your main goal to sell products? Encourage signups to build your mailing list? Your navigation should support the primary action you want your visitors to take when they get to your website. This can be as simple as making decisions like bolding the word “shop” in your navigation bar so it stands out for visitors.

Make your menu obvious

Make sure your navigation bar is easy to see when people first land on your website. Think of your website navigation as a digital map — it’s best to give your visitors obvious, clear directions that they can easily understand. Choosing to place your navigation bar at the bottom of your website, or hiding it as a drop-down menu from your logo, can create confusion for visitors who want to quickly find what they need. 

Use direct language

There’s a time and place for creative copywriting, but site navigation copy should always be to the point. If you’re offering online workshops, make your CTA as simple as “Browse workshops,” or “Sign up for a workshop.” Phrasing like “Join our community” or “Start learning” might create confusion for visitors, and ultimately lead to fewer signups for your courses.

Test your approach

Measure the efficacy of your website navigation by putting it to the test. Ask a few friends to click around your website and note where they get lost or confused. Make sure you get specifics about the source of their confusion. Is it the language on your website? The placement of your navigation bar? A dead link? The more specifics you can get, the easier it will be to improve your site navigation.

Keep it simple

Above all else, keep your navigation simple. The more complicated it is for people to find what they’re looking for, the more likely they are to leave — and the less likely they are to return. From the language you choose to the placement of your navigation bar, make it easy for people to move around your website.

Examples of great navigation UX

When you’re creating your website, make sure it has the key elements of effective navigation UX:

Responsive design

A website with great navigation will adapt to different devices. Whether someone looks at your website on their phone, a tablet, or a desktop computer, it should always look clean and organized, and have a consistent menu. Make sure your website has responsive design so that your navigation bar, images, CTA buttons, and other content stays consistent across every device.

Sticky navigation bar

A sticky navigation bar will always appear at the top of your website, making it easy for visitors to get where they need to go, no matter what screen they’re using. To adapt to smaller screens, like a smartphone, your sticky navigation might appear as an icon with a dropdown menu in the upper right or left corner of a person’s screen. 

Breadcrumbs

These are small text links, usually in the upper left corner of a person’s screen. An example of a breadcrumb path might be: Home > Shop > Product Page. In addition to helping people know where they are on your website, breadcrumbs also have benefits for search engine optimization (SEO). Search engines can crawl breadcrumbs to better understand your website’s structure, and categorize what you offer so that it ranks higher on results pages. All of this means that more people are more likely to come across your online presence — and when they get to your website, they’ll be able to easily find what they need.


If you’d like some professional guidance crafting your website design and navigation, consider hiring a Squarespace Expert.

Related Articles

  1. Know

    Building Your Website: Basic Page Layouts

    Building Your Website: Basic Page Layouts

  2. Know

    Basic Website Navigation for an Online Store

    Basic Website Navigation for an Online Store

Subscribe

Subscribe to receive the latest MAKING IT blog posts and updates, promotions and partnerships from Squarespace.

The email you entered is invalid.

Thank you for subscribing.