Your navigation bar is one of the most important parts of your website because it provides users with a roadmap to the most important pages and features. A well-designed navigation bar will help users to achieve their goals more efficiently. 

We find that the navigation bar is positioned differently in different types of products from one type to another. For some products, navigation bars are on the left side of the page, some are at the top, while some are at the bottom. We'll discuss what determines the difference, but first...

What is a Navbar? 

A navigation bar is a row of buttons located in the edge area of a page that serves to link various pages within a site or software. In website design, for example, the navigation bar is usually located on top or to the left, or a combination of both. 

Top navigation is the most common layout.

When we look at most consumer-facing products, we will find that most of them have a top navigation bar. This is because with information-based products, users will spend a lot of time reading and searching, so only a few basic functions need to be displayed in the navigation bar to satisfy most users. Since there is less content to put in the navigation, it is best to put it at the top, which mainly takes up less space.

Airbnb 

Artstation 

Left navigation is generally used for business-facing products.

We can see in many B2B products that the navigation is placed on the left side. Users seek to use the product to accomplish their goals, focusing on accuracy and efficiency. The navigation should list more features to ensure access, rather than ‘hide’ most of them. Compared to the top navigation, the left navigation can hold more information and is easy to scroll down to hold more information. 

Asana 

Why the Left side? 

JR Kingsburg once conducted an experiment where he compared three-level menu navigation structures for web design. Kingsburg used 8 different navigation layouts for 8 groups of users and found that the first-level navigation was more efficient, less hesitant and error-prone, and generally preferred by users when it was on the left side.

Top-Left comb navigation holds more complexity.

In fact, the ideal situation is to have only one type of navigation on the page. If both top navigation and left navigation exist, both the cost of understanding and the cost of operating them will be increased. However, as products being iterate, the functionality will be inevitably increased. When the single navigation bar is not clear enough to users, a combination of top and left navigation should be considered, depending on the information hierarchy. 

Jira 

Special case 

Overall, left navigation bar is commonly used for business facing products and top navigation is often used for consumer facing, and content-based products, the actual situation should be considered, too. For example, although Quora is a consumer-facing product, it uses a combination of top and left navigation. So in practice, design should be based on the users' needs and habits.

Quora