Navigation concepts

Photo of Felix Prause

Published on 23.05.2022 from Felix Prause
Reading time approx. 0 Min.

Where can I find the content on a website that interests me? This or a similar question is often asked by users when they visit a website for the first time. To guide users to the content they are looking for, a suitable navigation concept is needed. Otherwise, the content they are looking for will be difficult to find and they will leave the site.

What is navigation?

A navigation of a website is usually understood as the lists of content categories or functions that users visually perceive as menu items. These lists are usually presented as a group of links or icons and usually link to internal pages.

Over the years, there have been new concepts and ideas for how users can navigate a website. Below we will go over a few navigation concepts and briefly introduce them.

Horizontal Navigation Bar / Top-Bar Navigation

The most common navigation concept is the Top-Bar Navigation or also called Horizontal Navigation Bar. This navigation is characterized by a horizontal bar, which is often placed directly above or below the page header. The menu items are displayed next to each other and represent the primary navigation of the website. This menu bar remains identical throughout the site, even when users are on a subpage. This feature makes it easier for users to return to the main pages of the website at any time.

Furthermore, the top bar / navigation bar is often the top entry point of a website and serves as a good navigation concept for very simple websites (landing pages or one-pagers), as well as for complex websites (online stores). As soon as the navigation architecture depicts many different hierarchies, the top bar navigation can be extended via a drop-down or a mega menu.

This navigation concept is particularly suitable for a small number of menu items on the primary navigation level. Although there is no defined limit, the menu bar usually includes 6 - 9 menu items. In addition to the limiting width of the menu bar, factors such as the font and font size must also be taken into account.

Horizontal Navigation Bar / Top-Bar Navigation
Horizontal Navigation Bar / Top-Bar Navigation

Vertical Navigation Bar / Sidebar Navigation

Another very popular concept is the Vertical Navigation Bar or Sidebar Navigation. Similar to the Top-Bar Navigation, the menu items are placed vertically on top of each other. Mostly this menu bar is placed on the left side of the website and is often used especially with multi-column layouts. This positioning has the advantage that a large number of menu items can be displayed. In addition, additional navigation levels can be displayed initially if required, or these can be integrated into the vertical navigation via a fly-out. However, this position also has the disadvantage that the menu bar takes up a lot of space on the website and thus the available space for the essential content is smaller.

This navigation concept is mainly used on complex websites with a large number of top-level menu items. To still ensure a clear structure, the links should be grouped or the submenu items should be outsourced to fly-out menus.

Vertical Navigation Bar / Sidebar Navigation
Vertical Navigation Bar / Sidebar Navigation

Drop-Down / Fly-Out

Drop-Down and Fly-Out are not independent navigation concepts in the actual sense. As an extension for the Top-Bar Navigation (Drop-Down) and the Vertical Navigation Bar (Fly-Out) they offer the possibility to display deeper navigation levels without making the navigation more confusing.

The difference between Drop-Down and Fly-Out is very small. A drop-down is a menu that opens downwards (vertically). In contrast, a fly-out menu opens to the right or left (horizontally).

It should be noted that drop-down and fly-out menu items are not directly visible to users. To signal to users that a menu item contains a submenu, an indicator (arrow or similar) should be used.

Drop-Down / Fly-Out
Drop-Down (left) / Fly-Out (right)

Mega-Menu 

A mega menu is characterized by its ability to display several navigation levels at once. Complex structures are displayed well and users quickly get an overview of the essential information. The different levels are visibly separated from each other by layout and typography.

In addition to the actual menu items, a mega menu also offers the option of placing additional content such as images or icons. However, this option must not be overused under any circumstances. The mega menu must still be easy for users to grasp.

Mega-Menu
Mega-Menu

Hamburger Menu

The hamburger menu (or burger menu for short) usually describes a menu that can be accessed via a hamburger icon button (three horizontal lines on top of each other). The actual menu is initially not visually visible to the user and is only displayed after interaction with the button.

This menu was initially developed for small viewports (smartphones) in order to have recurring navigation elements centrally accessible in one place. In the meantime, this navigation concept is used regardless of the size of the viewport and users have learned that far-reaching navigation elements are located behind the hamburger icon.

However, the initially hidden menu also leads to less attention being paid to the navigation and thus to less interaction with the users. The fact that additional pages are available is not directly perceived.

Hamburger Menu
Hamburger Menu

Off-Canvas

An off-canvas menu is initially invisible to the user because it is located outside the viewport. Only through an interaction, e.g. a click on a button or a touch-swipe gesture, the menu is displayed. This then either overlays/obscures the website (drawer) or pushes it partially out of the viewport (slide-out).

Similar to the Hamburg menu, the initially hidden navigation has a negative effect on user interaction.

Off-Canvas
Off-Canvas as Slide-Out (left) and Drawer (right)

When which navigation concept is used depends on many criteria. A precise requirements analysis and usability testing with the help of interactive prototypes can simplify the decision.

There are many other navigation concepts that we have not discussed in this article. These include footer navigation, breadcrumbs, tabs or tags navigation. We will go into these in more detail in a later blog post. A successful website navigation is in any case the key to success and should be decided individually for each website to fit the concept and the requirements of the users.

Your feedback

Write us your opinion about our blog post. If you have any questions, we will be happy to advise you and look forward to hearing from you!

Your email address will not be published.

* These fields are required

Write comment

More Articles

01.07.2022

F7 goes fair

As part of the campaign "Wanted: Hamburg's Fair Offices", we took a closer look at our office and asked: How fair are we already and where is there still room for improvement? In the course of this, we collected numerous ideas on how we can make our office, as well as the home office, more fair.

Read more about F7 goes fair