Horizontal menu

Tagged as: , , , ,
 

The Design Need:

The user needs to be able to find what the website has to offer and find what they are looking for.

Design Examples:

Design Solution:

A horizontal menu is often used as main navigation. If your design does not allow for a horizontal menu you can use a vertical menu.

Design best practices for horizontal menus and navigation menus in general are:

  • Make the navigation area highly noticeable and place it consistently throughout the website. Navigation menus are one of the first things people look for when arriving on a website.
  • If there are multiple levels in your navigation make a clear visual distinction between the different levels.
  • Use clear and if possible familiar labels for the items in the menu bar such as contact, products, about us,…
  • If graphical links such as icons are used as menu items make sure they are easily recognized or provide clear labels for them.
  • Use the menu to provide feedback to the user about where he is in the website. Often a visual indication is used to show which menu item is currently active.
  • Clearly distinct action links from navigation links. It is common practice to place action links at the right of the page either in the horizontal menu bar or in the upper right corner. Typical action links used in the main navigation are login, search and a shopping cart.
  • If you offer a “back to home” link in the navigation menu make sure it is inactive if the user is at the home page.
  • Show the user if a drop-down menu is available.

When to use:

A horizontal menu is commonly used as main navigation menu on websites. If you are unsure about the amount of menu items in the future it is better to use a vertical menu.

If you use a combination of a vertical and horizontal menu to show different levels of the navigation structure, it is best to use the horizontal menu for the first level items and the vertical menu for the level 2,3,.. items. Users are accustomed to this hierarchy so might get confused if you turn this around.

Why use this solution (rationale):

Users look a navigation menu to show them what the website has to offer and how it is structured. A well designed and implemented navigation helps to guide visitors through the content on your website. A well designed navigation menu shows the website structure and helps the user to form a correct mental map of the site.

More info elsewhere:

• Categorized as Design Patterns