A vertical navigation structure is a good idea

17 inspiring navigation concepts

A lot has happened since the first website saw the light of day more than 25 years ago. New technologies, end devices and programming languages ​​have contributed to the development - much to the delight of users and designers. The navigation has also changed again and again over the years. Here we give an overview of the most innovative navigation concepts.

One thing has remained the same over the years in terms of website navigation. It should give people orientation. You can go to work in a playful and rethought way. But you should never lose sight of the user. In the battle of the numerous design options and technologies, one person still has the say: the website visitor. If he leaves the page because the entry elements are too confusing, the best design is of no use.

Here you can find what we consider to be the most important innovations in the area of ​​navigation design - everything from "Proofed Concept" to innovative is included.

Navigation concepts for desktop

Compared to mobile navigation, you can really let off steam with the desktop versions. There is simply more space for gimmicks. Nevertheless, our list is headed by a minimalist, now well-known.

1. Hamburger navigation

The Hamburg navigation is not called that because it was developed by a Hamburg agency, but because it simply looks like a burger. There is now hardly a mobile site that does not use the three bars as a navigation element. But even in the desktop area, more and more designers are enjoying this minimalist menu structure. Because only when you click on the three bars does the usual menu open, mostly vertically left or right justified.

2. Hamburger full screen navigation

A further development of the Hamburger Navigation is the consideration of a full screen view. This type of navigation is particularly suitable for giving the individual menu items even more expression. Finally, when you click on the “hamburger”, the navigation will cover the entire picture.

3. Multi-level navigation

The hamburger navigation is also wonderfully suitable as a sub-menu, as this example shows. First you click on a classic, horizontal navigation point and only then do the three bars appear, which signal us to learn more about the respective topic.

4. Gaming navigation

Creative agencies and brands in particular enjoy this inspiring navigation solution. Here the user is introduced to topics or products in a playful way - navigation as a game. The positive effect: The user immediately identifies with the website, it is remembered positively. After all, the visitor has never seen such individual navigation. To tell the truth, however, it should also be said that this navigation idea is not suitable for websites that are primarily about conveying quick information or selling. Here an emotional experience is created with the navigation.

5. In-picture navigation

A very exciting form of navigation is the idea of ​​welcoming visitors to the website in an enclosed space. Here, navigation is not an optional means of getting around, but the only way to use the website. This means that the user has to deal with the website in order to find out more information about the respective company - and in an entertaining way. Here, too, this type of user guidance is better left to creative projects or industries.

6. Mega menu

Almost a classic in the navigation world. And yet the multi-level mega menu should not go unmentioned, especially since on the one hand the fields of application are almost infinite and on the other hand the mega menu also offers a lot of scope to be creative - while maintaining clarity.

7. Full-width tab navigation

The advantage of tab navigation is that the content is already preloaded in all tabs. Basically, tab navigation is not a newcomer either. As the main navigation element, however, it does.

8. Button navigation

Only at second glance does this view look like a conventional top navigation. Instead, buttons appear, but they are arranged as in a horizontal top navigation. The advantage: More space to place information and icons. In addition, the visitor can see more quickly what is hidden behind the individual points.

9. Collapsible menu

Apple does it with the dock at the bottom of the screen, WordPress does it in the admin panel and many others are following suit. The idea of ​​the collapsible and collapsible menu follows the idea of ​​hamburger navigation a little. After that, the user should first deal with the respective main page and do so without distraction and in (almost) full-screen images.

10. Off canvas navigation

In principle, this type of responsive navigation works like a slider. Presumably invisible areas are made visible by clicking a button or arrow and float on the screen from the left or right.

11. Top and left navigation

Top-and-left navigation combines two classics, although it must remain clear that one of the two types of navigation is the main menu. When you click on one of these main elements, the submenu opens on the left or right edge of the screen. This type of navigation is particularly suitable for websites with a lot of content and menu items.

Navigation concepts for mobile

Ever since Google adopted the “mobile first” approach, designers should pay special attention to mobile navigation solutions. From now on, mobile-optimized websites should be given preference in the search algorithm. The following examples demonstrate that there is definitely scope in the mobile world to guide the user through the website.

12. Mobile Hamburg navigation

The Hamburg navigation is now probably the mother of all mobile menus. It is space-saving and everyone understands by now what the three horizontal lines mean.

13. Advanced Hamburger Navigation

However, the idea of ​​Hamburg navigation can also be further developed and enriched with icons or different colors, for example.

14. Tab icon menu

The tab navigation also works very well as a main menu element on the go. The presentation of icons instead of text is particularly smart. However, this approach is only ideal for very plastic terms.

15. Pull-down menu

Innovative, interactive and intuitive: the most advanced navigation solution currently available is the pull-down menu. Here the user pulls the menu symbol downwards and at the same time operates the navigation carousel. Depending on how far you pull, you get to the desired menu item. In any case, the principle is intuitively easier to understand than to put into words.

16. Mobile button menu

If you structure your content in such a way that you don't need a main page, you can also use this full-screen button solution. This type of navigation is very simple and yet particularly user-friendly, as it can also be operated with large fingers and invites you to click.

17. Mega drop down menu

It doesn't always have to be right or left justified. With a click on the navigation symbol, the navigation level descends horizontally from above. It is particularly smart, similar to the button menu, that easily understandable icons can be accommodated thanks to the comfortable space.

With so many choices, one point is particularly important: Regardless of which navigation you choose, it must match the offer, the philosophy and the target group language of the company, brand or project. It is therefore unavoidable at the beginning to put yourself in the shoes of your own website visitors. What information and what offers is my target group looking for primarily and how can I convey this to them in the most meaningful way? Only then does the search for the optimal navigation solution begin.