Types of Website Navigation and Examples

Types of Website Navigation and Examples

It’s important not to overlook website navigation when designing your own website. Even if you have stellar content, without good website navigation to complement it, the visitors who arrive on your webpage may never even see it. Can you think of a time when you were looking for a specific product or page on a website, and couldn’t find it? The best website navigation can help prevent this from happening. Read on to learn more about different types of website navigation, with examples of each.

What Is Website Navigation?

Website navigation is the way you access various pages on any web or mobile site. Typically, web designers ease you into navigating a website by including a menu of some sort where users can find and click on various sections and pages on the website, allowing them to quickly and easily access the content within.

When creating your own website, you will need to map out the website navigation beforehand. Make sure the content is organized, and users are able to access every page intuitively through menus, links, and other website navigation techniques.

A website with good web navigation is designed with knowledge and data about what people are typically looking for when they access that website. This means that the perfect website navigation structure is not one-size-fits-all. If you are looking to improve your website navigation, keep in mind the type of website you have, and how similar it is to the examples shown below.

Types of Website Navigation

There are several different ways to go about designing website navigation for your own site. Think about where you want to lead visitors and the strategy you plan on using to do so. Types of website navigation widely vary by industry and type of website. You might think your only option is including a drop-down menu bar at the top of your website’s homepage is the way to go when designing your website navigation, but this is not your only option. Browse the types of website navigation in the list below to explore other options for your site.

1. Header Menu

The header menu is the most common type of website navigation — and with good reason. Users intuitively know how to access it. This type of navigation could also simply be called a menu bar or top navigation bar. To create a header menu, list categories or pages of your website horizontally across the header. These can be anything you like, but make sure they are labeled and categorized correctly so as not to confuse your website visitors. The first link and the last one, historically, get the highest click through rate on the header menu. 

The items in the header menu can have one of two functions: dropdown menu or hyperlink. You can use both of these functions in the same menu bar if you choose to. As dropdowns, users can hover over one of the menu items and see a secondary, dropdown menu that lists pages in that category. The items in the dropdown menu list should be hyperlinked to the appropriate pages on your website. 

If you want to include hyperlinks in the primary menu bar instead of in dropdowns, you can. Instead of hovering over these items, users can just click on them and they will be taken to a particular page on your website. Hyperlinks are useful for taking users to popular pages, like a contact form or FAQ page.

In this example from Deciem, a beauty product website, users can hover over the category of product they are looking for in the header menu, and see a secondary menu populate with types of products in that category.

header menu

2. Sidebar Menu

A sidebar menu serves the same function, more or less, as a header menu, except it lives on the left or right side of the screen when users view your website instead of in the header on top. It’s also possible to include a sidebar menu on some of the pages on your website in addition to a header menu. This is a more common practice amongst clothing retail websites compared to other types of websites. 

In the example below from Urban Outfitters, the top bar menu is used for navigation to broad categories of the website, like “Women’s,” “Men’s,” “Home,” and “Sale.” On the sidebar menu navigation, specific subsections of the section the user is currently viewing are hyperlinked. In the example, we are viewing the “Women’s” category page, and can navigate to subsections of it like “Dresses + Jumpsuits,” “Denim,” or “Activewear.” Showing users these categories in a sidebar menu encourages them to explore items they might not have initially come to the website to buy, increasing sales and improving the user experience of your website.

sidebar menu

2. Hamburger Menu

No, a hamburger menu is not a list of grilled beef patty sandwiches prepared with various toppings and served with french fries. A hamburger menu is an expandable website navigation scheme that can easily be optimized for mobile. Most of your users will probably already be familiar with the hamburger menu design — three horizontal lines indicating a menu. When users select the “hamburger,” the menu expands into a vertical list and they can make a selection from it, taking them to the respective page on your website. 

The main purpose of a hamburger menu is to save space on the page, which is why it is so useful for apps and websites optimized for mobile, as they are viewed on a smaller screen. However, don’t let that discourage you from using a hamburger menu on your traditional website. If you are going for a simple, clean-cut aesthetic, using larger photos, or don’t have a need for a traditional website navigation menu, you might want to try out a hamburger menu for your main website.

In this example from Zara, the website is designed to draw your attention to the photos, rather than offering menu selections right away. The website navigation menu is still easily found on the homepage — just hover over the hamburger menu and a sidebar will pop out, listing categories and other pages on the website.

hamburger menu

4. Interlinking

In addition to some type of menu, it's also a good idea to interlink the pages of your website. This strategy is particularly helpful for blog or database websites with a large volume of pages that want to improve their SEO. Interlinking involves including links to relevant pages of your website on other pages, creating a web of internal website links. The links could be included within the text of blog posts, or have their own section on a page. For example, you may want to include a section on each page for recommendations for further reading or similar products, based on the content within a given page. However, if you use links, make sure they are clearly marked as such. Choose a different color for the text, or underline it so users know they can click on it.

Interlinking serves two purposes: the first one is to help users find the pages they want or need to see on your website. It also encourages them to further explore your website, spending more time discovering pages that they otherwise never would have opened. The other purpose for including interlinking in your website navigation strategy is improving your SEO, or search engine optimization. The internal link structure helps search engines recognize similar content on your website, and establish a hierarchy of which pages are more important than others. This results in your page ranking higher in search engine results, bringing more traffic to your website.

The example below from Epicurious, a recipe website, displays effective use of interlinking. The author of the pie-crust recipe describes alternatives to traditional pie crust, linking the text to relevant pie-crust recipes on the Epicurious website. The hyperlinked text is easily discernible from the regular text because it is colored blue. As a bonus, there is also video content embedded on the page, encouraging pie bakers to explore more pie-related content on Epicurious.

interlinking

On Foxtrot, a food and grocery delivery website, product recommendations are linked at the bottom of any product page, encouraging customers to explore other products they might be interested in, based on the one they are already looking at.

you may also like

3. Breadcrumbs

Breadcrumbs are a type of website navigation that works well in conjunction with interlinking. Taking their name from the breadcrumbs that Hansel and Gretel left behind in order to find their way home in the classic fairy tale, breadcrumbs are the trail of pages that users can use to find their way back to your website’s homepage. The breadcrumb trail on your website is typically found at the top and generates once users move from one page to the next. They can refer to the breadcrumbs to easily navigate back to a previous section of your website, eliminating the need for them to search for it or navigate to it with other menus. It isn’t necessary to include breadcrumbs in your website navigation, but including them could improve user experience. 

Check out the breadcrumb trail in the top left corner in the example below. On the Target website, users can shift back to previous categories until they find the exact product they are looking for. As you can see, the categories become more specific the further they are down the breadcrumb trail.

breadcrumbs

5. Footer Menu

A footer menu is located at the bottom of your homepage, or any other page on your website, and can take any form you would like it to, but traditionally it consists of a comprehensive menu containing hyperlinks to each section of your website. Footer menus are a little old fashioned but are still a common strategy for website navigation. They’re also a place that website visitors go to find your business’ contact information. 

Footer menus function like an index — they are a place users can go when they either can’t find a way to or don’t want to use other forms of menu navigation on your website. While they usually don’t look as aesthetically pleasing as some other types of menus, users will appreciate the help when they come to your website looking for a specific page and don’t want to spend too much time clicking around to find the page they are looking for.

In the example below from Numero Group, a record label, the footer menu contains direct links to various sections of the website. Website visitors can find links that take them directly to the “Store” to buy products, to “Stream” music, or check out the blog section by clicking on “Stories.” There are also links that take users directly to the commonly visited “About” and “Licensing” page.

footer menu

6. Search Bar 

A search bar is a blank space where users can enter a keyword for a specific topic, item, page, etc., and look for results related to that keyword. When all other website navigation features fail, a search bar can help your website’s visitors find what they are looking for (provided it actually is somewhere within the domain). Include a search bar near the header and/or footer of your website and indicate it with the word “Search” or a magnifying glass symbol so its purpose is obvious. This navigation tool is especially helpful for websites like blogs or media websites that contain a lot of content not easily accessed via clicking through menus or hyperlinks.

A good example of a website search bar is Exchange Marketplace. See the search bar on top, marked with a magnifying glass icon and text that says “Search businesses.” If a user comes to Exchange with a certain type of website in mind that they would like to purchase, they can simply enter a keyword like “baby products” or “furniture” into the search bar, and be shown all of the relevant websites for sale. From there, they can filter the results by criteria like price and revenue.

search bar

Conclusion

Take these ideas for types of website navigation and consider which ones you would like to implement when designing the navigation for your own website. Keep in mind that you don’t need to limit yourself to just one type of website navigation — some websites even contain all of the types shown above. Just make sure you choose a combination that will allow your users to quickly find the content they are looking for. 

Topics: