Top navigation vs side navigation, which one is better?

How to design the navigation bar on desktops and large screens is actually a frequently discussed issue. Today, it is also a design issue that cannot be avoided in B-side design. Jennifer Rose Kingsburg once conducted a study on the three-level menu navigation of web pages, and concluded that setting the navigation on the left has many benefits. In addition, there are many similar studies. You can see the summaries of many related studies here. It is worth noting that most of these studies are research results before 2017, and many design paradigms have changed now.

1. Left navigation is easier to navigate

Eyetracking research shows that users are accustomed to using an F-shaped browsing path, which makes the left navigation relatively more usable in general. It does not require users to look for it because users will subconsciously notice its existence.

2. Top navigation saves more space

If we often use laptops to browse pages, we will easily notice the proportion of page space occupied by different navigation modules. The page control occupied by the left navigation is usually three times the space occupied by the top navigation of the same amount of content, because the vertical sidebar navigation needs to take into account the horizontal title space, plus the addition of functional modules such as search, this space occupation has become an inevitable result. Even if the left menu bar can be folded, this approach is not always effective, because it may hide the label information of related items, reducing the usability of navigation.

3. Side navigation is easier to scale and store

It is also the layout logic of the left navigation itself that it can usually display twice as many items as the top navigation. If your information architecture itself involves a large number of first-level menu items, using the left sidebar navigation is obviously a more reasonable choice, and this navigation is very suitable for the need to gradually increase the number of items over time.

4. Side navigation supports customized navigation structure

Although the side navigation itself takes up more space, it also has more space to customize various needs according to different requirements. Compared with the top navigation, the side navigation can even directly display the hierarchical secondary menu, just like the sidebar of Outlook and the sidebar navigation of Slack.

5. The sidebar is more consistent with the desktop system

You will notice that in macOS and Windows operating systems, the default user interface of the system mostly adopts a flexible sidebar navigation design, and many web applications are also the same, they will leave the top space for the system default menu module. The UI interface using sidebar navigation can be consistent with the logic of the operating system.

6. Hover-activated submenus are better in top navigation

The design of hover-activated drawer-style drop-down menu is very natural in the top navigation, but in the sidebar navigation, this design may block the submenu to a certain extent. If it is expanded on the side, it may take up a lot of space. In short, it is more in line with the interaction mode of the top navigation.

7. The top navigation bar is suitable for a super menu

Because the top navigation is very compatible with the function of hovering to trigger the sub-menu, many e-commerce and large websites use it to present a super menu with many items. It is an effective way to accommodate a sub-menu with many items at a time. This layout also leaves enough space for product display and advertising.

8. Try to avoid changing navigation mode during redesign

If one navigation mode doesn't seem to be easy to use, should we take the opportunity of redesign to switch to another mode? According to Jira's user testing, 95% of early users will feel very confused about this situation. Even the smallest modification of the navigation function may directly affect the daily use of a large number of users. Therefore, no matter which navigation mode is selected, try not to change it.

9. All navigation bars face the challenge of responsive design

For top navigation without too many items, it can still be directly presented at the top on the mobile terminal, but if there are too many items, you need to use a hamburger menu to carry it, or switch to a vertical sidebar navigation. Sidebar navigation is relatively better on the mobile terminal because the navigation mode itself is consistent, but how to present a large number of navigation items in a limited space is also a challenge.

Conclusion: Which navigation bar to use depends on the needs

Top navigation: It takes up little space, is most prominent on the page, and works very well when there are not many items involved. For small and medium-sized websites with simple hierarchical structures, top navigation is still very useful. For super navigation with fewer levels but a lot of secondary items, top navigation is also the best choice.

Side navigation: Side navigation supports navigation requirements with more first-level items and more levels, and has good scalability. It is suitable for complex products, products with more customization requirements, products involving management functions, and desktop-level products.