Top menu vs Side menu on dashboard

Question

I'm designing an admin dashboard and this came to my mind.

• Should I use a side menu or a top menu?
• Why? What's the main difference for the user experience?

When using a top menu it looks more consistent when analysing it cross browsing, since it's always on top, even though this dashboard is going to be responsive, it's something users will not use very often on mobile, at maximum on a tablet. This is real information based on the previous version of this dashboard.

On the other hand, the side menu seems to be more consistent on a desktop, with a more intuitive way to change menus.

So, based on this information, what type of menu should I choose? Currently I have no criteria on what type of menu to use besides of layout and appearance.

Answer 1

From a UXMovement.com article:

Top or left menu, there is no absolute answer. When it comes to designing for users, context is king.

A navigation that works well in one context may not fit well for another context. To conclude which navigation is best for your application, it's important to understand the different context where the top and left navigation may work best.

Scanning

1. A left navigation is faster and more efficient for users to scan.
2. The left navigation also facilitates a vertical scanning direction that is natural for people.
3. Top navigation forces a horizontal scanning direction that people often use when they’re reading.

Visibility

1. Top navigation items are more visible because they are always above the fold and are easier to find.
2. Left navigation items are not always above the fold because sometimes if you have too many items, some of them can get pushed below the fold.
3. Top navigations are also easier to find because they are usually accompanied by the header and logo, both of which are visually dominant objects.

Priority

1. The left most item carry more visual weight than the other items because of its placement in the primary optical area (top left).
2. Items in the top left get more exposure.
3. Left nav takes more priority because there is no balance navigation at the right side.
4. Items in a top navigation do not have equal weight.

When it comes to design, there are few absolutes where one approach will be 100% effective all the time for all cases. Finding the approach that is best for you and your users, calls for an understanding of the context involved.

Answer 2

From the GUI Evolution point of view the navigation layer of commands is expected to be on the top, whether on sides of the screen you would commonly find the operational/contextual layer of commands.

In the particular case of dashboards, where the navigation layer tends to merge with the operational one, it is probably more elegant to place the menu on the left side. Even more so, in case the menu is expected to have many entries.

For example navigating and operating in wordpress admin is quite the same

Answer 3

I have been trying going through some discussions regarding when and how to implement navigation within a 'dashboard' like page, so here are some of the considerations we have taken into account, which will hopefully help you come up with the right answer:

• Length of page: this is where the top nav is good for long pages, as the side nav takes up room down the whole length of the page
• Amount of menu items: the top nav deals with this using either a mega menu structure or collapsible/accordions, whereas the side nav can use a tree/folder structure as well
• Additional navigation elements: if you use breadcrumbs or in-page secondary navigation, it is important to fit this into the rest of the presentation of the navigation system
• Viewport: side nav is good for wide screen desktop because the navigations are tightly grouped, whereas top nav will tend to spread it out further; in mobile you want more horizontal space so top nav works better than side nav
• Application ecosphere: if this is part of a suite of applications, can the style that you choose be applied consistently to create a common look & feel?

Answer 4

I prefer to reserve the top-menu for the highest-level interactions. Things like: getting to the 'home' of the website, switching to a totally different workflow, accessing the user profile, etc. These activities are less-common, and users will intuitively scan the very top of the page for these higher-level activities.

The side-menu can be more useful for actions that a user will take more frequently. If the actions you are grouping are part of the same workflow (say, navigating sections of an inbox, or monitoring sales in different categories), then I'd say use a side-menu to keep the users logically in the same workspace.

If users will frequently be flipping between these dashboard menu items, I would recommend the side-menu. I would need to know more about the workflows to suggest otherwise.

For examples of this, see: Pivotal Tracker, Facebook, Gmail, and CircleCI.