94% of people say easy navigation is the most useful feature of a website.

It’s easy to understand why. Website navigation allows visitors to quickly and easily find the information they’re looking for, like a blog post or product page. It can also help them find important information that they didn’t know they needed, like your pricing plan, your email signup page, or contact info.

This makes navigation an essential part of the user experience and your website strategy. A navigation system that enables visitors to find content by searching and browsing can not only improve the chances of visitors browsing your site longer — it can also improve the chances of them taking action on your site.

Download Our Free UX Research & Testing Kit

To ensure you can design a navigation system that meets the needs of your visitors, we’ll take a closer look at what website navigation is and the different ways you can implement it on your site. Then we’ll explore some best practices for designing a navigation interface, and check out examples from real websites. Let’s get started.

That’s because navigation is considered the tip of the iceberg that is a website’s information architecture (IA), according to IA analyst Nathaniel Davis in an article for UXmatters. Below the water’s surface are the parts of the iceberg the front-end visitor can’t see: the research, strategy, management, and organization that went into building out the website’s IA. Above the water’s surface is the navigation interface, most often represented as a series of hypertext links and a search bar.

In other words, the website’s IA isn’t visible in the navigation interface, but it is the foundation of that interface. This gives visitors the sense that the content is connected and categorized to meet their needs and expectations — without actually showing all the spreadsheets and diagrams that went into identifying and organizing those relationships among your content.

Here’s a look at an example of a website’s hierarchy. A little intimidating at first glance, right? In a primary navigation menu, you’d likely only see the three section names from that first level. The subpages would have to be nested in a sub-navigation menu. Let’s define that term below.

Example website hierarchy with 4 levels

Image Source

What is sub-navigation on a website?

Sub-navigation  — also known as local navigation — is the interface where visitors can find lower-level categories of a site’s IA. These are typically sub-categories of the main navigation links.

For example, on the nonprofit website for the Nashville Zoo, the primary navigation menu contains the navigation item “Support.” When you hover over that item, a sub-navigation menu appears offering multiple ways to support the zoo. There are links to the donation, careers, and volunteer pages, among others.

Nashville zoo website displaying sub-navigation menu under primary nav link for Support

Types of Website Navigation

Navigation is one of the — if not the — most important design element on a website. It ultimately impacts whether visitors arrive on your homepage and browse, or click the “Back” button.

So how you structure your website navigation depends on your target audience, and what format you think would be most intuitive and accessible to them. Let’s look at a few of the most common types of website navigation you can choose from.

Horizontal Navigation Bar

The horizontal navigation bar is the most common website navigation menu. It lists the major navigation pages side by side and is placed in the website header. Many websites feature the same sections, like “About,” “Products,” “Pricing,” and “Contact,” because visitors expect to see them. But these sections won’t necessarily be the most helpful to visitors on all sites.

Take the nav bar on Blavity as an example. The sections featured include three content categories — “News,” “Op-Eds,” and “Lifestyle” — as well as links to their submission page and sign-up page. These are much more likely to provide visitors with easy access to the pages they’re looking for rather than the standard About, Pricing, and Contact pages.

Horizontal Navigation menu on Blavity

Image Source

Dropdown Navigation Menu

Dropdown navigation menus are ideal for content-rich sites with a complex IA. If you’d like to include a lot of links to pages in your navigation bar, you can’t list them all side-by-side. It would either look cluttered or be impossible to fit them all horizontally. Instead, you can list the most important or general items in the top-level navigation bar and include the rest in a dropdown menu.

Sephora is a great example since it offers so many products and services. On its website, you can hover over any primary navigation link and a detailed dropdown menu will appear. The dropdown menu will contain all the categories for that particular section of the site.

Dropdown navigation menu on Sephora's website

Image Source

Hamburger Navigation Menu

The hamburger menu is most often seen in mobile web design. With this style, the navigation items are often listed horizontally on larger screen sizes and collapse behind a hamburger button on smaller screen sizes. When visitors click on this three-line icon, a vertical drop-down or horizontal pop-out appears with the navigation links. This type of design is ideal for mobile apps or sites where real estate is limited.

Check out the hamburger menu on Nettle Studio’s mobile site.

Hamburger menu on Nettle Studio's mobile site

Image Source

Vertical Sidebar Navigation Menu

With this menu type, the navigation items will be stacked on top of one another and positioned in the sidebar. While less popular than horizontal navigation, vertical navigation does offer several benefits. Since real estate isn’t as limited, you can write longer navigation links and include more top-level options. It’s also more eye-catching, which makes this non-traditional style work well for restaurants, agencies, and other creative businesses.

Take a look at Arbor Restaurant’s vertical sidebar below.

Vertical sidebar menu on Arbor resturant site

Image Source

Footer Navigation Menu

A footer menu is typically paired with — and expands upon — a horizontal navigation bar. If a visitor doesn’t find the nav link they’re looking for in the header, they can scroll down to the bottom of the page for more options.

The New York Times, for example, has 19 nav links in its horizontal navigation menu at the top of the page. Its footer menu has over 50 nav links, most of which belong to one of the categories listed in the primary navigation menu. This offers easy access to sub-categories of the website’s most popular sections.

Fat footer on the New York Times

Image Source

Website Navigation Bar Design

There’s no “right” way to design your website navigation, just as there’s no right way to design a website footer. You simply have to consider how you can enable first-time and repeat visitors to get the most out of your site.

By centering your design process around your unique visitors, your navigation structure will look and function differently than a navigation structure on another site. That’s a good thing.

Keeping your target audience in mind, let’s walk through the stages of the website navigation bar design process below.

What should be included in your website navigation bar?

With all of the pages on your website it can be hard to determine which are important enough to be part of the universal navigation. For the sake of SEO and user experience, Orbit Media recommends keeping your navigation limited to seven items at most.

So, how do you begin to narrow the field? Stakeholders from throughout your company may have varying opinions about what is nav-worthy and what is not, but ultimately you should look to your website visitors to help you determine the best direction.

Card Sorting

Card sorting is a simple user experience technique that helps you get into the minds of your website visitors and design the navigation from their standpoint. The good news is, you don't have to have any UX experience to run this exercise.

Invite people from outside of your organization in for a simple 20-minute exercise. Lay out a stack of index cards on the table, each representing a major page on your site. Then ask the participant to organize the cards any way they see fit. Look for trends in how your participants group the pages on your site, and ask them how they would name each category. The resulting organization can help build the backbone of your site navigation.  

card sorting exercise

Image Source

Attribution Reports

If your marketing analytics software provides it, attribution reporting is perfect for deciding what should go into your main navigation. This report attributes the number of newly created contacts to their interactions with your business, so you can better understand the content and functionality on your site that's converting visitors into leads. Here’s a look at some of the sample reports available in HubSpot’s attribution reporting tool.

contact attribution sample reports in HubSpot

Image Source

Take HubSpot’s own website, for example. While some of our content offers garner a lot of traffic, the most common pages viewed by people who ended up buying HubSpot software were the product pages, pricing, case studies, and partners. If you take a look at our homepage, you'll see that the navigation reflects this finding and prioritizes those critical pages.

Users Flow

If you don't have an attribution report, you can still get a sense of which pages are important on your site though the Users Flow report in Google Analytics. While this report doesn't differentiate standard traffic from customers, it does highlight how people seem to navigate their experience on your site. In Google's own words: "The Users Flow report is a graphical representation of the paths users took through your site, from the source, through the various pages, and where along their paths they exited your site.”

How should you order your navigation items?

Order matters in website navigation. Cognitive studies provide evidence that web page viewers tend to remember links on either end of the navigation most vividly. Often referred to as the primacy and recency effects, they speak to the phenomena that words presented either first or last in a list tend to pull more heavily on the attention span of viewers. So for your website, you'll want to be very intentional about what items you place in these spots. Think about what is most important for your typical visitor.

In an article for Neil Patel’s blog, web strategist Andy Crestodina says, "Put your most important items at the beginning of the navigation and the least important items in the middle. ‘Contact’ should be the last item on the list, putting it at the far right in top-level horizontal navigation, a standard location."

How should you phrase your navigation options?

How you phrase your navigation options depends on the type of business or organization you are. You can opt for straight-forward, or experiment with more creative labels. What’s most important to keep in mind when choosing the words to use in your main navigation links is to think first about the terms your customers would use to describe those pages. Then, think of search engine optimization.

Object-Based

Arguably the most clear-cut option for websites is object-based navigation. Object-based navigation places content under concrete (typically noun-only) categories. HubSpot.com is an example of object-based navigation, as is Emerson College's site below. This type of organization treats the navigation as a table of contents and groups pages into the topics or categories that best fit.

Emerson College's object-based navigation options

Image Source

Notice that the navigation links to the right are more action-based than object-based. Let’s define this below.

Action-Based

Some sites may be better served by action-oriented navigations. To know when this is appropriate, ask your audience whether they primarily come to your website to learn about something, or to take an specific action. In the example below from Howard University, visitors are clearly coming with an action in mind. They aren’t visiting to read the "about" page -- they’re coming to apply, visit, or donate.  

Howard University's action-based navigation options

Image Source

Audience-Based

For companies that have multiple audiences with clear lines, you may want to consider an audience-based navigation or sub-navigation as in the example below. This only works, however, if a visitor can easily classify themselves. For example, you wouldn't want to use small vs. medium size company, or marketing vs. advertising agency, since those lines are often blurred and may leave your audience confused as to where to go first.

In the example below, Boston College does a nice job of using an audience-based approach in combination with an object-based navigation.

Boston College's audience-based navigation options

Image Source

Search Engine Optimized

In addition to matching the way your audience instinctually organizes your site, you'll want to think of how to best optimize your navigation terms for search. In an article on Distilled, SEO strategist Kristina Kledzik advises using Google Analytics and Google's Keywords tool to identify the search terms that are most commonly bringing people to your site, and use variations on those words as the guide for your website navigation.

Website Navigation Best Practices

The golden rule of website navigation? Don't make people think. Usability consultant Steve Krug bases an entire book on this sentiment. To enable users to navigate your website with ease without feeling lost or frustrated, follow these best practices below.

1. Be consistent.

Be consistent in how you format and design your navigation interface. The idea is not to be consistent for consistency’s sake. It’s about aligning with the current knowledge and expectations of the visitor.

Say on your homepage, your links are black and an underline appears when a user hovers their mouse over them. Then that should be the style of all your navigation links on every page of your site. Otherwise, visitors won’t know which text is hyperlinked and which isn’t in your navigation menus.

Notice that Madewell’s primary and sub-navigation menus have consistent link styling. The text is slightly smaller and unbolded in the sub-navigation menu, which is a visual cue that these links are of secondary importance.

Madewell nav links appear with underline on hover

Image Source

2. Design for every screen size.

With mobile devices accounting for over half of organic search engine visits this year, it’s never been more important to optimize your website for mobile and other screen sizes. That includes your navigation menus.

When designing your website navigation, start by thinking mobile first. By starting with the smallest screen size, you’ll have to prioritize what links are most important to include in your primary navigation, and in what order. You’ll also have to decide what navigation features — like a hamburger button — are necessary on mobile, and how they’ll fit into your desktop design. This will help you shift into designing for larger screen sizes with a clear idea of what pages and navigation features are most important.

3. Make the most important information accessible.

Have you ever heard of the three-click rule? It’s the idea that every website navigation structure should enable someone to land on any page on a website and find what they need within three clicks.

While this idea has become deeply entrenched in the world of web design, it’s been largely discredited. In fact, one study found that users weren’t any more likely to quit a task after three clicks than after 12 clicks. The chart below shows that some users kept trying to find their desired content after as many as 25 clicks.  

Clicks to completion graph shows users aren't any more likely to quit a task after three clicks

However, the basis of the rule is good. You do want to limit the amount of effort required for visitors to access key information or accomplish a task on your site. Counting clicks is just too superficial a metric. Instead, you should focus on creating clear pathways, reducing page load time, and removing other friction points in the user journey.

4. Add breadcrumbs.

To understand breadcrumb navigation, think of the fairytale in Hansel and Gretel. As they travel into the woods, two children drop breadcrumbs so that they can find their way home. Breadcrumb navigation is designed for the same purpose: to enable users to visualize where they are in the website’s structure and be able to retrace their steps to higher-level pages.

It doesn’t take up much real estate either. This secondary navigation bar is typically made up of text links separated by the "greater than" symbol (>) and placed below the header.

In the example from Best Buy below, you could be browsing PC laptops and realize you want a tablet. Instead of starting over with a new query in the search box, you could simply click the “Computers & Tablets” link in the breadcrumb menu.

Breadcrumb navigation on Best Buy website

Image Source

Website Navigation Examples

As mentioned above, there’s no “right” way to create a website navigation bar as long as it enables your visitors to find the information they’re looking for and encourages them to take action — whether by making a purchase, donating, creating an account, and so on. Let’s check out examples below that do exactly that.

Propa Beauty

Propa Beauty has a minimalist horizontal navigation bar designed to generate sales or convert visitors into members. It’s logo is to the left. At the center is a link to its product archive page. To the right, there are three icons, each respectively representing a search box, link to a member login page, and link to a shopping cart.

Horizontal navigation bar on Propa Beauty website

Image Source

NWP

NWP is another ecommerce site with a horizontal navigation bar. Unlike Propa Beauty however, NWP’s navigation bar is a combined menu. When the page loads, you can only see the primary navigation links. However, if you hover over “Shop,” a dropdown menu appears listing the different sub-categories of clothing you can shop for on the site.

Subnavigation menu under "Shop" on NWP ecommerce site

Image Source

The Shade Room

The Shade Room makes use of two styles of navigation menus as well. At the top of the page, you see a standard horizontal header. Notice that this header contains a hamburger button to the right. If you click on this button, a secondary navigation interface appears to the right. This acts like a lightbox popup, blocking some of the content and dimming the rest of the background, and contains more navigation links that you can use to browse the site.

Horizontal navigation menu and hamburger menu used on The Shade Room

Image Source

Twitter

Twitter features one of the standard navigation types — the vertical sidebar menu — but with a twist. Instead of simply featuring text navigation items, it includes icons next to each item. Notice the strategic color use as well. Home is in blue, because that’s the page I’m on. The only other pop of color in the nav bar is the CTA button.

Twitter's vertical sidebar menu featuring icons and text

Image Source

Olivier Gillaizeau

The portfolio site of Creative Director Olivier Gillaizeau features an eye-catching vertical sidebar menu that displays his projects on a timeline. When you hover over one of the nav items, a video preview of the project shows. Clicking the nav item will take you to a page with more information about and visuals of the project.

Vertical sidebar menu on creative portfolio website

Image Source

Designing Your Website Navigation

Designing your website navigation requires careful consideration of your visitors and website goals. You want to make sure humans and search engine bots can find the content or functionality they’re looking for, and understand the relationship among your pages. That way, they’ll continue to browse and take desired actions on your site — like creating an account or completing a purchase — rather than exit out in frustration.

ux templates

 ux research kit

Originally published Oct 9, 2020 7:00:00 AM, updated October 09 2020

Topics:

User Experience