Good navigation is one of the most important feature of a website. And we're not just saying that — there's research to back it up.
It’s easy to understand why navigation matters so much to visitors. It allows them 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 a pricing plan, an email signup page, or contact information.
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.
To help you design a navigation system that meets the needs of your visitors, let's take a closer look at what website navigation is and the different ways you can implement it on your site. Then, we’ll check out examples from real websites and explore some best practices for designing a navigable interface. Let’s get started.
What is website navigation?
Website navigation is a collection of user interface components that helps visitors find content and features on a site. These components take the form of copy, link text and buttons, and menus.
That last item is especially relevant in navigation, so let's quickly define what a menu actually means in web design:
What is a navigation menu?
On a website, a navigation menu is an organized list of links to other web pages, usually internal pages. Navigation menus appear most commonly in page headers or sidebars across a website, allowing visitors to quickly access the most useful pages.
Now, it would be easy to leave it there and call it a day. However, navigation does more than help us move from one web page to another — it also helps us understand the relationships between individual pages on a website.
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 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.
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.
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.
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 type of navigation menu. It lists the major 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 a submission page and a sign-up page. These are more likely to provide visitors with easy access to the pages they’re looking for rather than the standard About, Pricing, and Contact pages.
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, 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.
Hamburger Navigation Menu
The hamburger menu is most often seen in mobile web design. With this approach, 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.
Vertical Sidebar Navigation Menu
With this menu type, the items are stacked on top of each other 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 style work well for agencies and other creative businesses.
Take a look at Arbor Restaurant’s vertical sidebar below.
Footer Navigation Menu
A footer menu is typically paired with — and expands upon — a horizontal navigation bar. If a visitor doesn’t find the 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 has 19 nav links in its horizontal navigation menu at the top of the page. Its footer menu has over 50 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.
Website Navigation Bar Design
There’s no one “right” way to design your website navigation. 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 on your unique visitors, your navigation structure may look and function differently than a navigation structure on another site, and 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 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.
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.
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.
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.
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.
Notice that the navigation links to the right are more action-based than object-based. Let’s define this below.
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.
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.
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 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 has a minimalist horizontal navigation bar designed to generate sales or convert visitors into members. Its 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.
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.
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.
To accommodate its large catalog of items, Patagonia implemented a mega menu on its website. When users hover over the “Shop” item in the horizontal navigation bar, a giant list of links appears for anything you might want to browse. Also note that other items in the navigation bar, namely “Activism” and “Stories,” do not trigger mega menus on mouseover.
Like Patagonia, the website navigation on Briogeo.com centers on a horizontal navigation menu that reveals different navigational options depending on which item you hover over. The main “shop all” item (pictured below) shows a mega menu with site-wide links, plus images to represent its collections. In contrast, the “our difference” option makes heavier use of images to form a stronger emotional connection with visitors.
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.
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.
So far, we’ve mostly discussed the functionality of navigation menus, but tweaking the styling can make for a delightful user experience as well. Take Pipcorn’s website for example — its horizontal navigation reveals vertical dropdowns that expand in a gorgeous animation. It’s a detail that fully supports the site’s artisanal branding and makes visitors feel that much more immersed and engaged.
Website Navigation Best Practices
- Be consistent.
- Design for every screen size.
- Make the most important information accessible.
- Add breadcrumbs.
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.
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.
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.
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.
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 in frustration.
Editor's note: This post was originally published in October 2020 and has been updated for comprehensiveness.
Originally published Jul 28, 2021 7:00:00 AM, updated July 28 2021