Good website navigation is an essential website feature. And we're not just saying that — there's research to back it up. According to a study by Top Design Firms, 38% of consumers look at a page's navigational links and layout when looking at a site for the first time.
The importance of navigation can't be understated. And, it's understandable why visitors prefer sites that implement website navigation best practices. It can help them quickly and easily find the information they're looking for, so navigation is a quintessential part of the user experience and your website strategy.
Today, we're taking a closer look at website navigation design so you can create a system that suits your visitors. We'll also explore website navigation best practices. After, we'll check out website navigation examples and explore some must-haves for effective design. Let's get started.
What is website navigation?
Website navigation is a collection of user interface components that allows visitors find content and features on a site. These components can be in the form of copy, link text and buttons, and menus.
That last time mentioned is arguably the most relevant in effective website navigation, so let's briefly define what a menu means in website design.
.png)
Free UX Research Kit + Templates
3 templates for conducting user tests, summarizing your UX research, and presenting your findings.
- User Testing Template
- UX Research Testing Report Template
- UX Research Presentation Template
What is a website navigation menu?
A website navigation menu is an organized list of links to other web pages, usually internal site pages. Navigation menus appear in page headers or sidebars across a website, allowing visitors to access the most useful pages quickly.
While helping visitors move from one web page to another is a main priority, it isn't the only one. Navigation also helps visitors comprehend the relationships between individual pages on a website. But what exactly does that look like in practice? Let's break it down.
Navigation is seen as the tip of the iceberg of a website's information architecture (IA), according to IA analyst Nathaniel Davis in an article for UXmatters. Below the water's surface are the portions of this iceberg the front-end visitor can't see: The research, strategy, management, and organization that went into building the website's IA. Above the surface is the navigation interface, most often represented as a series of hypertext links and a search bar.
So, your website's IA isn't visible in the navigation interface but is the foundation of that interface. This ultimately provides visitors the sense that the content is connected and categorized to meet their needs and expectations but never actually shows 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, but it's digestible when you get a feel for what each term means. You'd likely only see the three section names in a primary navigation menu from that first level. Then, the subpages will likely be nested in a sub-navigation menu.
What is sub-navigation on a website?
Sub-navigation, or local navigation, is the interface where your site visitors can locate lower-level categories of a site's IA. These are usually sub-categories of the main navigation links.
Take the nonprofit website for the Nashville Zoo, for instance. 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. This is an effective add because visitors can seamlessly find what they're looking for, but the menu is not overwhelming at first glance. It's a win-win.
What are the types of website navigation?
Why exactly is website navigation so cruical? Well, for starters, it impacts whether visitors arrive on your homepage and browse or click the "Back" button, leading to a higher bounce rate. As a result, you should deeply consider the best way to structure your website navigation. And that's where the different types of it come into the picture.
How you structure your website navigation depends on your target audience and what format you think would be most intuitive and accessible. Here are some common types of website navigation you may consider as you build your site.
Horizontal Navigation Bar
Let's kick it off with the horizontal navigational bar. As you might have guessed, the horizontal navigation bar is the most common type. It lists the major pages side-by-side and places them in the website header. Many websites feature the same sections, like "About," "Products," "Pricing," and "Contact," because visitors expect to see them.
While these sections are popular for a reason, you shouldn't be afraid to customize your site by tailoring your menu. When you build your navigation bar, consider your website purpose and audience. What are you trying to achieve on your site, and what are visitors looking for? Start by answering those two questions and go from there.
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 give visitors easy access to the pages they're looking for rather than the standard About, Pricing, and Contact pages.
Dropdown Navigation Menu
Up next, we have the dropdown navigation menu. This option is ideal for content-rich sites with a complex IA. If you want your menu to include plenty of links to pages, you may consider using this option, as you can't list all the options side-by-side. Instead, you can list the most crucial or general items in the top-level navigation bar. Then, you can add the rest in a dropdown menu.
Take Sephora, for instance. This site offers an excellent example since it offers so many products and services. You can hover over any primary navigation link on its website, and a detailed dropdown menu will appear.
Hamburger Navigation Menu
Another option you should keep in mind for website navigation is the hamburger. You might already be familiar with this menu because it's popular with mobile web design. If you use this approach, your navigation items will be listed horizontally on larger screen sizes.
Free UX Research Kit + Templates
3 templates for conducting user tests, summarizing your UX research, and presenting your findings.
- User Testing Template
- UX Research Testing Report Template
- UX Research Presentation Template
On a smaller screen, however, they will collapse behind a hamburger button on smaller screen sizes. And when visitors click on this three-line icon, a vertical drop-down or horizontal pop-out appears with the navigation links. If there's limited real estate on your site or you don't want navigation taking up a large chunk of space, the hamburger navigation menu might be the right pick.
Check out the hamburger menu on Nettle Studio's mobile site.
Vertical Sidebar Navigation Menu
Now, we have vertical sidebar navigation menus. This is an excellent choice for website navigation because it offers a seamless user experience. The items are stacked on top of each other and positioned in the sidebar. Admittedly, this is less popular than horizontal navigation, but vertical navigation has benefits. Real estate isn't as limited so that you can write longer navigation links. There's also the opportunity for more top-level options.
Take a look at Arbor Restaurant's vertical sidebar below.
Footer Navigation Menu
Another option is the footer menu. It is typically paired with — and expands upon — a horizontal navigation bar. If visitors don't see the link they need in the header, they can scroll down to the bottom of the page where they'll find 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, and most of them belong to one of the categories listed in the primary navigation menu. While this does offer easy access to important subpages, it can get overwhelming — so use your discretion.
Website Navigation Bar Design
With website navigation design, there's no one "right" way. But there is a right way to think about how you'll set up your navigation: By considering how you can enable first-time and repeat visitors to make the most of your website. You can't go wrong if you create your website navigation with that in mind.
When you center your focus on your site visitors, your navigation structure may look and function differently than a navigation structure on another site. That's actually a good thing because it means you're adequately considering your target audience in mind.
Let's walk through the design process as you create your website navigation.
What should be included in your website navigation bar?
Because there are a lot of pages on your site, determining which are cruical enough to be part of the universal navigation can be tricky. For SEO and user experience, Orbit Media recommends keeping your navigation limited to seven items at most.
But how do you begin to narrow the field? Stakeholders from your company may have varying opinions about what is nav-worthy and what is not, but keep user experience central. Ultimately, consider your website visitors to determine which route you should take. Here are some strategies you can use to get started deciphering what your site visitors want to see on your menu.
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. And no, you don't need any UX experience to try this exercise.
To get started, invite people from outside of your organization in for a 20-minute exercise. Lay out a stack of index cards on the table, each representing a significant page on your site.
Next, ask the participant to organize the cards however they feel suitable. Look for trends in how your participants group the pages on your site and ask them how they would name each category. This is an extremely effective way to understand what feels intuitive to users.
Attribution Reports
Next, your website navigation design can benefit from attribution reporting. If your marketing analytics software provides it, this 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.
If you use HubSpot as your CRM software, you're a step ahead, as you can easily get started with attribution reports. Here's a look at some sample reports available in HubSpot's attribution reporting tool.
Take HubSpot's website, for instance. While some of our content offers garner lots of traffic, the most common pages viewed by people buying HubSpot software include product pages, pricing, case studies, and partners. Look at our homepage, and 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 see which pages are essential on your site through the Users Flow report in Google Analytics. This report doesn't differentiate standard traffic from customers, but it highlights how people 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."
Free UX Research Kit + Templates
3 templates for conducting user tests, summarizing your UX research, and presenting your findings.
- User Testing Template
- UX Research Testing Report Template
- UX Research Presentation Template
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?
The best way to phrase your navigation options varies depending on the type of organization or business you run. For starters, you can opt for straight-forward navigation or experiment with more creative labels. Of course, make sure whatever you choose feels intuitive to your brand.
When choosing the words to use in your main navigation links, what's most important to remember 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.
Notice that the navigation links to the right are more action-based than object-based. Let’s define this below.
Action-Based
Action-oriented navigations may be a better fit for other sites. To know when this is appropriate, ask your audience whether they primarily come to your website to learn about something or to take a specific action. In the example below from Howard University, visitors come with an action in mind. They aren't visiting to read the "about" page -- they're coming to apply, visit, or donate.
Audience-Based
For companies with multiple audiences with clear lines, you may want to consider 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 an excellent job of using an audience-based approach in combination with object-based navigation.
Search Engine Optimized
In addition to matching how your audience instinctually organizes your site, you'll want to think of how to optimize your navigation terms for search best. In an article on Distilled, SEO strategist Kristina Kledzik advises using Google Analytics and Google's Keywords tool to identify the search terms that most commonly bring people to your site. Then, you can use variations on those words as the guide for your website navigation.
Website Navigation Examples
By now, you know that there's no "right" way to create website navigation. As long as your site navigation enables your visitors to find the information they're looking for and encourages them to take action, it's successful. Let's check out examples below that do exactly that.
1. Propa Beauty
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.
2. 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.
3. 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.
4. Patagonia
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.
5. Briogeo
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.
6. 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.
7. 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.
8. Pipcorn
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.
9. GXVE Beauty
The strength of GXVE beauty's website navigation is how simple it is. The font is clean, the design is minimal, yet it truly offers visitors everything that they want. If you want to shop for a specific item, you can click the 'Shop' page and expand. Then, there are options to even dig deeper as you can expand the pages again.
Image Source10. Paloma
This website navigation is an excellent reminder that you can infuse your site with a healthy dose of playfulness, as long as it is in sync with the rest of your branding. This creative agency takes the opportunity to tell its brand story with an animated menu when you hover over each page.
Image Source11. Living Corporate
Living Corporate's website navigation scores points because of how unique it is. When you arrive on the site, there's no menu in site — and when you click the top of the page, it expands. As you hover over the different pages, images and videos pop up, and a graphic mouse, which we appreciate as a fun detail.
12. Unseen Studio
And last but certainly not least, let's dive into what makes Unseen Studio one of our favorite website navigation examples. The menu is tucked away in the right hand corner and when you click on it, it expands beautifully. We love the text contrast, color selected and how it works with the background image, and the addition of contact info and social links.
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. As you can see from these website navigation examples, the more obvious it is, the better. Usability consultant Steve Krug bases an entire book on this sentiment. Follow these website navigation best practices to enable users to navigate your site without feelings of frustration or confusion.
Free UX Research Kit + Templates
3 templates for conducting user tests, summarizing your UX research, and presenting your findings.
- User Testing Template
- UX Research Testing Report Template
- UX Research Presentation Template
1. Be consistent.
Consistency is key, and website navigation design is no exception. This is a crucial website navigation best practice because it can make or break a user's experience. Be consistent in how you format and design your navigation interface. This is all about aligning with the current knowledge and expectations of the visitor.
For instance, consider how visitors would feel if your homepage links were black, and an underline appeared when a user hovers their mouse over them. Then, when they check out the 'contact' page, the links are blue, and there's no underline. That's confusing, right? Instead, your links should have the same style on every site page. 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, a visual cue that these links are of secondary importance.
2. Design for every screen size.
With mobile devices accounting for over 59% of global website traffic in Q4 2022, it's increasingly essential your website and navigation is optimized for all screens regardless of size. And, according to Shopify, by 2024, over 42% of total ecommerce purchases will occur on a mobile device — so prioritizing mobile is crucial. Yes, that extends to your website navigation menus.
When designing your menu, we encourage you to think about 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. This is also an excellent exercise in prioritization.
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.
Are you familiar with the three-click rule? Essentially, this concept speaks to 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.
And though this concept is deeply entrenched in the world of web design, it's been largely discredited. 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.
Though the rule might not be exact, the basis teaches us an important principle. You do want to limit the effort required for visitors to access key information or accomplish a task on your site. Counting clicks is just too superficial a metric. So, instead, we encourage you to invest time in mapping your website, establishing clear pathways, reducing page load time, and removing other friction points in the user journey.
4. Add breadcrumbs.
If you need an example of breadcrumb navigation, remember the fairytale of Hansel and Gretel. As the two travel through the woods, the children drop breadcrumbs so that they can find their way home.
Similarly, with breadcrumb navigation, visitors can visualize where they are in the website's structure. Then, they can retrace their steps to other pages with a simple click. And the best part of this is that it won't take up much real estate on your site. This secondary navigation bar is typically made up of text links separated by the "greater than" symbol (>) and placed below the header.
Take the example from Best Buy below, for instance. If you are browsing PC laptops and realize you want a tablet, you can use the breadcrumbs to get back to the page you need. Instead of starting over with a new query in the search box, you could click the "Computers & Tablets" link in the breadcrumb menu. Once again, the purpose here is to reduce friction and improve user experience.
Designing Your Website Navigation
When you design your website navigation, you must carefully consider your visitors and website goals. Remember: There are humans on the other side of the screen that will have to navigate through your site, and their ability to do so can significantly impact their willingness to stay. Plus, search engine bots can benefit from strong website navigation design.
Editor's note: This post was originally published in July 2021 and has been updated for comprehensiveness.
![15 Best Wireframe Tools for Your Website Design [2024 Guide]](https://lh7-us.googleusercontent.com/3-6WlJtqrfXD8GteCr8Hrmr-WGvEExHxZ_7JNMiDatlbwpDplWMQ1hZl-iI-kni-9rRp_ygnABHlyoTiRNdJChRVmbUN6Gxt5vvfe6v_gzUKLFqPhUvU82ZO2CfMSncKW3CN9nfyBN7ZLukpMkcRmwo)