Navigation concepts

If we look at the word navigation from the point of view of etymology, it means something like "determining the course and location of ships and aircraft". So it describes how to accompany someone on their planned route and guide them to their destination. As with any creation of a product, the focus is on the user. Therefore, a well thought-out navigation should be created in the first place. The interface also plays a role here, but even despite the most creative solutions, frustration arises for the user if there is a lack of structure. The menu is one of the most central navigation elements. It is a graphical control element that represents the interaction possibilities with the application.

Concepts

Horizontal Navigation Bar

The classic horizontal navigation bar is a widely used navigation. It is located in the header area and shows all main navigation points at a glance. Ideally, no more than 4 or 5 items should be listed here. This is because in addition to the main navigation items, you will often find the logo, login, search and/or shopping cart in the header area. This could quickly look cluttered and squeezed on smaller monitors.

Drop-Down Navigation

Auch diese Art der Navigation gehört zu den Klassikern. Beim Auslösen eines Hauptnavigationspunktes erscheinen weitere Punkte. Diese Navigation bietet eine Strukturierung und Übersicht aller Navigationslinks.

Hamburger menu

As the name suggests, the icon reminds us of a hamburger. Mobile it is the most common menu, but also in desktop variants it becomes more and more popular. The menu only appears when you click on it. You can find more about the hamburger menu here.

Hamburger Full Screen Navigation

This type of navigation is an extension of the hamburger menu. The menu items appear as full-screen across the entire screen and it is particularly suitable for bringing the main navigation items into focus.

Mega Menu

The Mega Menu is an established classic. This navigation displays multiple levels at once. This can be done from left to right (flyout) or from top to bottom (dropdown). It offers many possibilities for design and room for creativity. However, it can also quickly become confusing and cluttered.

Button Navigation

Button navigation focuses on icons, which are often supported by text. However, the focus of this navigation is on the icons. So the user has an additional visual support and space saving.

Slide navigation

This type of menu is quite unobtrusive in "idle" mode. The page remains tidy and the content is in the foreground. When the navigation is triggered, the navigation items slide into the visible area and the user can access the links.

Accordion Navigation

This menu is built like a tree structure. This type allows to accommodate and compress many menu items.

Bottom Navigation

It is particularly popular with mobile devices. As the name suggests, the navigation is located at the bottom of the product and is therefore easy to use with one hand. Icons are mainly used, as space is also rather limited.

Grid navigation

Grid navigation can be found, for example, in streaming services or booking systems. The navigation is clearly in focus and fills the entire page. It provides a quick overview and usually shows images and graphics with text as navigation points.

Which of these variants is used depends heavily on the target group, the output medium and product, as well as other factors. So there is no one right choice of navigation, the individual decision is crucial.