AAA Web Agency logo

The Essential Guide to Website Navigation [Types & Top Examples]

The Essential Guide to Website Navigation [Types & Top Examples]

Types of website navigation

One of the most crucial aspects of any website is its ease of use. We’re not making this up; studies confirm this.

It’s not hard to see why visitors care so much about ease of navigation. As a result, users may simply locate the specific page, such as a blog post or a product page, that they’re trying to access. It can also lead consumers to previously hidden resources, such as pricing plans, email subscription forms, and customer service phone numbers.

Because of this, the navigation system on your website is a crucial component of the overall user experience. Visitors are more likely to stick around on your site and take some sort of action if they can easily search for and browse for the material they’re looking for.

Let’s go deeper into what website navigation is and the various methods you can use it on your site so you can develop a system that satisfies your visitors’ needs. Then, we will look at some live websites as examples and discuss some guidelines for making a user-friendly layout. Okay, so let’s begin.

This last point is crucial in navigation, so first, let’s explain what we mean when we talk about a “menu” on a website.

It would be convenient at this point to just end the discussion. Although its primary function is to facilitate our movement from one online page to another, navigation also clarifies the connections between the various pages that make up a website.

IA expert Nathaniel Davis explains why this is in an essay for UXmatters, noting that navigation is only the beginning of the information architecture (IA) of a website. The aforementioned research, strategy, management, and organisation that went into building out the website’s IA are the submerged components of the iceberg that the front-end visitor cannot see. The navigation interface sits atop the website, and it typically takes the form of a menu of hypertext links and a search field.

That is to say, the website’s IA is implicit in the structure of the menu bar but crucial to its functionality. This makes it seem to visitors as though the information is linked and categorised in a way that meets their needs and expectations, without having to expose the underlying data structures (such as spreadsheets and diagrams) that you used to discover and map out those connections.

Consider this website structure as an illustration of website hierarchy. To put it mildly, it’s a little scary at first. The three names of those initial sections are probably all that would appear in a primary navigation menu. The subpages would need to be arranged in a hierarchical sub-menu structure. In the following, we will examine the meaning of this phrase.

What is sub-navigation on a website?

Sub-navigation, often known as local navigation, is the user interface that allows users to go to more specific sections of a site’s information architecture. This is a level beneath the primary links in the navigation bar.

For instance, “Support” is a main menu option for visitors to the Nashville Zoo’s non-profit website. A drop-down menu including several options for helping the zoo will show when you hover over that option. You can go directly to the donation page, the careers page, or the volunteer website.

Types of Website Navigation

The ease of navigating a website is crucial to its success. It determines whether people land on your homepage and explore, or leave immediately.

Your website’s navigational structure should reflect the needs of your intended audience and be designed with their ease of use in mind. Let’s take a look at some of the most popular options for website navigation.

Horizontal Navigation Bar

One of the most typical menu layouts is a horizontal bar at the top. Located in the top of the site, it provides a side-by-side list of the most important pages. Websites typically have the same basic structure, with sections like “About,” “Products,” “Pricing,” and “Contact” that visitors have come to anticipate. However, not all sites will have the most success with these parts.

One such example is Blavity’s navigation bar. There are connections to a submission website and a sign-up page, as well as the three content categories of “News,” “Op-Eds,” and “Lifestyle.” Instead of the usual About, Pricing, and Contact pages, these will direct readers directly to the information they need.

Dropdown Navigation Menu

Websites with plenty of content and an intricate information architecture benefit greatly from dropdown menus. You can’t just list all the pages you want to link to in the navigation bar side by side; doing so would either look terrible or be physically impossible. Instead of including everything in the main navigation bar, only the most essential or generic options should be displayed.

Sephora is an excellent illustration because it provides such a wide variety of options. When you hover over the site’s main navigation links, a more extensive submenu appears. In the case of this particular web section, the drop-down menu will provide all of the available categories.

Hamburger Navigation Menu

In mobile site design, the hamburger menu is the standard navigation option. The menu items in this style are typically laid out horizontally on wider screens and hidden behind a hamburger button on narrower ones. When a user clicks on the three-lined icon, a drop-down menu or pop-out menu appears, depending on the screen orientation. If you have a mobile app or website with limited real estate, this layout is your best bet.

The mobile site for Nettle Studio can be navigated using the hamburger menu.

Vertical Sidebar Navigation Menu

In this style of menu, the options are piled one on top of the other and placed in a horizontal column. Although vertical navigation is not as common as its horizontal counterpart, it does have some advantages. Because there is greater room, you may create more comprehensive menus with more detailed submenus. It’s also more striking, therefore it’s a good fit for advertising firms and similar creative enterprises.

See the Arbor Restaurant sidebar in the vertical position below.

Footer Navigation Menu

In most cases, a footer menu will complement and provide additional functionality for a standard horizontal menu at the top of the page. If a user doesn’t see the desired navigational option in the header, they can always browse for other choices toward the footer.

The New York Times’ horizontal menu at the top of the page contains 19 different options. There are more than 50 links in its footer menu, and the vast majority of these are subheadings of those found in the main menu. This makes it simple to go to certain sub-sections of the site’s most visited content.

Website Navigation Bar Design

You can arrange your website’s links however you see fit; there is no single “best” solution. You need just give thought to the best ways to facilitate your site’s users, both new and old, in making the most of their experience.

It’s a positive thing that your site’s navigation structure might not look or behave exactly like the navigation structure of another site because you focused on your users during the design process.

Let’s take a look at the steps involved in designing a website’s navigation bar while keeping your intended audience in mind.

What should be included in your website navigation bar?

With so many pages on your site, it might be challenging to choose which ones should be included in the main menu. Orbit Media suggests no more than seven links in the navigation bar for optimal search engine optimization and user experience.

How then might one start to whittle down the options? Even though people at different levels of your organisation may have different ideas about what belongs in the navigation and what doesn’t, you should eventually ask website users for their input.

Card Sorting

Card sorting is a straightforward UX method that allows you to put yourself in the shoes of your website’s users so you can build a navigation structure that best meets their needs. The good news is that prior knowledge of user experience design is not required to do this test.

Bring in the outside world for a short 20-minute exercise at your company. Spread out several index cards on the table, and have each card represent a different section of your site. Then, have them sort the cards into whichever order they like. Track how people generally classify your site’s pages and get their input on what those classes should be called. Your site’s navigation structure can benefit greatly from the order thus created.

Attribution Reports

Attribution reporting is ideal for determining what should go into your primary navigation if it is available in your marketing analytics platform. This report details how many new contacts were generated as a result of certain customer actions, illuminating which aspects of your website’s content and features are responsible for the increase in lead generation. Take a peek at some of the sample reports that can be generated using HubSpot’s reporting tool for attributing success.

For instance, consider HubSpot’s home page. While we do see a fair amount of interest in some content offers, our product pages, pricing, case studies, and partners sites are where the majority of individuals who end up purchasing HubSpot software actually spend their time. The homepage’s navigation reflects this discovery and puts the most important pages front and centre.

Users Flow

Even without an attribution report, Google Analytics’ Users Flow data can help you determine which pages are most vital to your site’s success. This report does not distinguish between regular visitors and paying clients, but it does show how visitors appear to use your site. Directly from Google: “The Visitors Flow report is a graphical representation of the paths users took through your site, from the source, through the various pages, and where along the paths they exited your site.”

How should you order your navigation items?

It’s important to think about website navigation in terms of order. According to memory studies, people are more likely to recall navigation links near the page’s beginning and finish. Words that come first or last in a list have a greater draw on readers’ attention, a phenomenon known as the primacy and recency effects. You should give careful consideration to the content that you post in these sections of your website. Consider what information would be most useful to your average site visitor.

Web strategist Andy Crestodina writes on Neil Patel’s blog, “Prioritize the content on your navigation bar by placing the least-used links at the top. Contact should be the very last option in the horizontal navigation bar, on the far right.”

How should you phrase your navigation options?

The best way to describe your various menu options will vary with the nature of your company or group. You have the option of using plain language or becoming creative with your labelling. Think about the words your clients would use to describe those pages before deciding on the words to use in your major navigation links. Then, you should consider SEO.

Object-Based

Object-based navigation is arguably the most transparent choice for webpages. The information is organised under specific (usually noun-only) headings in an object-based navigation system. HubSpot.com and the Emerson College website that follows are two examples of sites that use object-based navigation. In this structure, the navigation acts like a table of contents, and related pages are grouped together.

The right-hand menu emphasises verbs over nouns, as evidenced by the anchor texts. What does this mean, exactly?

Action-Based

There are times when sites would benefit more from directive menus. If you want to know if this is the right move to make, survey your visitors and see if they came to your site for information or to make a purchase. The visitors to Howard University’s example below are obviously there to do some sort of task. They aren’t curious about the company and are only viewing the site to apply, visit, or donate.

Audience-Based
An audience-based navigation or sub-navigation like the one demonstrated below is an option for businesses with distinct user groups. This, however, will only be successful if visitors are easily categorised. You shouldn’t use terms like “small vs. medium-sized business” or “marketing agency” and “advertising agency,” because these distinctions are sometimes hazy and could lead your readers astray.

Below is a good illustration of how Boston College combines an audience-based strategy with an object-based navigation.

Optimization for Search Engines
You should consider how to best optimise your navigation keywords for search, in addition to matching the way your audience instinctively organises your site. SEO expert Kristina Kledzik recommends using Google Analytics and the Google Keywords tool to determine which search terms are leading visitors to your site, and then basing your site’s structure on those terms and their variants. This advice was published on Distilled.

Example Site Maps for Navigation
As was previously noted, there is no “correct” way to design a website’s navigation bar so long as it helps users locate the content they seek and prompts them to perform the desired action, be it a purchase, a donation, the creation of an account, etc. Check out more examples of this kind of usage down below.

Radiant Charm
The primary goal of Propa Beauty’s easy-to-use horizontal menu, which is designed to increase sales and membership sign-ups, is obvious. To the left is its logo. There is a button that reads “Product Archive” in the middle. There are three icons located on the right side of the screen; these represent the search bar, the member login page, and the shopping cart.

NWP

Similar to many other online retailers, NWP features a horizontal menu across the top of the page. The menus on NWP are all in one place, unlike on Propa Beauty’s bar. Only the primary menu items will be displayed initially. But if you put your mouse pointer over “Shop,” a submenu revealing the various categories of clothing available on the site will display.

The Shade Room

The Shade Room also features two distinct types of menu bars. You can tell it’s a typical website because of the horizontal header at the top. On the right side of this header, you’ll see a hamburger menu. If you select this option, a supplementary menu will show up on the right. Similar to a lightbox popup, this obscures portion of the screen’s background while revealing more site navigation options.

Patagonia

Patagonia has a huge selection of products, so the company created a “mega menu” for their website. The “Shop” link in the sidebar expands into a comprehensive list of categories when the mouse is hovered over. Also, the “Activism” and “Stories” links in the navigation bar will not open up huge menus when you hover over them.

Briogeo

Similar to Patagonia, Briogeo.com’s primary means of navigation is a horizontal menu that, when moused over, shows additional links for easier site exploration. Listed below is an image of the primary “shop all” option, which opens a mega menu with site-wide links and photographs of the various collections available. The “our difference” approach, on the other hand, relies more heavily on visuals to build an in-depth connection with viewers.

Twitter

Twitter has a vertical sidebar menu, which is a variation on a common navigation style, but with a unique twist. Each of the tabs in the navigation bar now has an accompanying symbol as well as text descriptions. Take note of the thoughtful usage of hues. It’s highlighted in blue because that’s the page I’m currently seeing, which is home. The call to action button is the only other element of the navigation bar to feature any sort of colour.

Olivier Gillaizeau

When visiting the portfolio site of Creative Director Olivier Gillaizeau, you may first notice the striking vertical sidebar menu that charts the development of his various works. There is a preview video that plays when you hover over the navigation elements. When you click the menu item, you’ll be sent to a new page with even more details and pictures of the undertaking.

Pipcorn

We’ve focused on the practical aspects of navigation menus so far, but improving the aesthetics can also lead to a better user experience. Take Pipcorn’s website as an example; when you scroll horizontally, dropdown menus appear in the vertical position and grow with lovely animation. It’s a fine touch that reinforces the site’s high-quality branding and makes users feel actively involved.

Website navigation’s one cardinal rule? Avoid provoking introspection. Steve Krug, a usability expert, has written a whole book around this idea. Adhere to these standards to ensure that your site’s visitors never feel lost or frustrated while navigating it.

1. Be consistent.

Maintain uniformity in the structure and style of your interface for users to navigate. The point is not to maintain uniformity for its own sake. It’s important to match the visitor’s present level of understanding and expectations.

Let’s pretend that all the links on your homepage are black and underlined when a user places their mouse cursor over them. Then employ that design for all of your site’s navigational links throughout every page. Otherwise, site visitors will be confused as to which words in your menus should be clicked on to access additional information.

The links in Madewell’s main and secondary menus all look the same. Sub-navigation menu links are visually denoted as secondary by being significantly smaller and unbolded.

2. Design for every screen size.

There has never been a more crucial time to ensure that your website is accessible across a variety of screen sizes, as mobile devices now account for more than half of all organic search engine visitors. Which means your menu structures as well.

Keep mobile users in mind from the beginning of the design process for your website’s menu. By focusing on the smallest viewport first, you can decide which and how many links to include in the primary menu. You must also determine whether or not a mobile-specific navigation bar (like a hamburger button) is required and how it will relate to the desktop version of your site. This can assist you make the transition to designing for larger screen sizes by highlighting the most crucial pages and navigational elements.

3. Make the most important information accessible.

Does the three-click rule seem familiar? It’s the principle that no matter where a user enters a website, they should be able to reach the information they’re looking for within three clicks.

The theory may have taken hold in the field of web design, but it has since been widely debunked. One study showed that users’ likelihood of abandoning a task did not increase with the number of clicks required to complete it, from 3 to 12. The data in the following figure reveals that some users persisted in their search for material for as many as 25 clicks before giving up.

Even still, the rule’s underlying principle is sound. You should make it easy for visitors to find what they’re looking for and get their work done on your site. Clicks are an insufficiently deep metric. Instead, you should work on streamlining the user experience by eliminating unnecessary steps, slowing down the page load time, and otherwise smoothing out the flow of the user’s journey.

4. Add breadcrumbs.

Think of the Hansel and Gretel story if you need a visual for breadcrumb navigation. Two kids go exploring in the woods and leave a trail of breadcrumbs so they can find their way back. Users may see where they are in the site’s hierarchy and easily return to previous levels with the help of breadcrumb navigation.

As an added bonus, it doesn’t necessitate a lot of room. This secondary menu is made up of text links separated by the “greater than” symbol (>), and it is often located beneath the header.

You might be looking at PC laptops at Best Buy below, but then decide you’d rather have a tablet instead. Clicking the “Computers & Tablets” link in the breadcrumb menu will take you directly to the appropriate section without requiring you to clear out the search box and start over.

Designing Your Website Navigation

It’s important to think about both your audience and your end objective while designing your website’s navigation. Both human users and search engine crawlers need to be able to navigate your site and locate what they’re seeking for in terms of content and functionality. That way, people won’t get frustrated and leave before they’ve had a chance to complete the actions they came to your site to perform, like signing up for an account or making a purchase.

This post was initially published in October 2020 and has since been revised for accuracy and comprehensiveness.

More To Explore