24 Jul Navigation Menus: Which is Better For Your Website

If you are going to revamp your website, or you are doing a brand-new website, this article will be useful to you. If you already have a website but you would like to evaluate if your navigation menu is suitable, feel free to read on.

Horizontal Menus
These type of menus are very popular because when users first goes to the website, it is the first item (at the top of the website) that catches their eyes. They will be great for websites that are simple and navigation is direct.

However, please take note that this menu is only feasible if you know the number of menu items there are. This means you already know what you want to have on your website and the number of menu items is more or less fixed. A horizontal menu is difficult to expand as there will be a space constraint to insert more items if there are additions to be made.

Also, if the page needs to be scrolled down a fair bit, you might want to add a ‘Back to Top’ link so the user can easily and quickly jump back to the top of the page to view the menu.

Vertical Menus
Vertical menus are good if you have space constraints and you need a large number of items in your menu. They are suitable for websites where you have a hierarchical structure and would like to provide the option for users to visit the pages across sections etc.

For vertical menus, they can be simple flat menu (no sub-menus), or where there sub-menus required, accordions, tree menus or flyout menus may be used.

Accordion Menus
These menus are like their names – they expand and collapse according to what the user selects. Only the selected menu item will be expanded. There should be clear icons to explain to users that these menus are expandable.

In a way, this expand-and-collapse option will take up less space and only display what the users need to see.

However, this also means the users will NEED to click on the menu item to see the sub-menu.

Tree Menus
In tree menus, the user can click to view the sub-menu of the item (or sub-sub-menu of the item) and it will not hide itself until the user clicks to hide it. The user can go on to select and expand the other menu items to view the sub-menu of the items.

The only issue about the tree menu is it might be too long when all the menu items are expanded.

Flyout Menus
These are similar to drop-down menus except that because they are vertical, flyout menus will drop to the right or left of the menu. Usually it is to the right because most sites with vertical menus have their navigation on the left, adhering to the common reading trend – left to right.

Flyout menus will naturally cover the content on the page when they are opened. Plus, take note that if you are using flyout menus, the number of sub-levels should not be more than 2 levels otherwise it is going to be difficult for users to use the menu.

Drop-down Menus
As mentioned, drop-down menus can be used for both vertical and horizontal menus although they are more often used for horizontal menus.

However for the drop-down menu, some of them might require the user to have some special skills… If the menu item is tiny, the user might need to accurately trace the line from the menu to access the submenu. In some cases, it could be difficult to keep the mouse cursor over them. Once the mouse cursor exceeds the hit area, the entire menu will disappear and it could be frustrating for the user to have to trace the menu to get to the submenu again. In this instance, you might want to take note of the time the submenu closes. Try not to let the submenu disappear immediately when the user fails to trace the line.

In recent years, the mega-drop-down menus are popular for websites where they can categorise the submenu items and allow users to view all the sub-menus at one glance.