Horizontal menus - perhaps the most popular type of navigation in web design. It is safe to say that today most sites use this type of menu in order to simplify browsing.
Nevertheless, in modern web design there are a lot of types of horizontal menus. Some offer usability advantages for certain types of sites, while others look aesthetically better.

In this article, we will focus on a variety of approaches and practices in order to make sure that the horizontal menus are easy to use, and also note some less effective solutions. Also, we will focus on a couple of trends that may help developers work on horizontal menus in future projects.

Use well-known names for references.

Let's start with the convenience and ease of use of any navigation menu. When a user visits a new site, the menu will be one of the first things he will consciously notice. If this element is well decorated, the user will turn to him for help to solve his problem. Almost every website has certain sections that are “expected” by users, for example “About us”, “Services”, “Products” or “Contact us”.
By the very nature of the Web, users will be unhappy with any delay due to incomprehensible navigation if they cannot immediately find the necessary data.
')
So, the link to the “About Us” page should be called “About Us” [Thanks, Cap - approx. translator] or “Contacts”, the link to the section of services is called “Services” or “Our Services”
Excessive creativity in the process of naming the main menu items can lead to a loss in convenience for your user.

Impulse development
The menu of this site does not create unnecessary problems with navigation

Even under the most unusual circumstances, do not call the page with the services provided - "What we do." And you do not need to call the contact page “Ways to find us.” In search of information, users try to find familiar words and, at first, unconsciously avoid unfamiliar or incomprehensible words and phrases.

Clearly identify major and minor sections

Once you have figured out which parts of your site are essential, and which are minor, in importance for a potential user, you can already visually create a hierarchical menu structure that will increase the usability of your site.

Important links (for example, “Services”, “Contacts”, etc.) should be clearly distinguishable from secondary ones. The designer’s job is to, if possible, divide all navigation links into these two categories and clearly indicate their differences to users.

Consider a few examples:

Edwards & hampson

The site Edwards & Hampson has a good clear horizontal menu, which is the main means of navigating through the pages of the site. While there are standard links (“About Us”, “Our Services”, “Products”), there are many other links in this menu that are not so “primary” in relation to the user; however, they are important enough to be visible.

Similar example:

Deliciouslyorkshire

Links on The Deliciouslyorkshire's website leading to important sections (“Home”, “About”, “News and events”, “Recipes”) are located next to those that would seem to be secondary sections (“Promotions”, “Useful links "). Both types of links are bookmarked, with no signs of hierarchy.
In fact, if some of these links are less important for site visitors, then designing sections with a reflection of the hierarchy would be a wise decision. Of course, these companies could have good reasons to design their menus this way, and this is not necessarily a bad example; most likely, these are just exceptions illustrating the importance of the visual hierarchy.

Here are two examples of sites that emphasize the hierarchy, while leaving less important links easily accessible:

Designers couch
Designers Couch has important navigation links in the main menu ("Home", "Gallery", "Jobs", etc.), as well as secondary links on the same menu, but retaining visual differences ("Find a designer", "Get involved").

J Taylor Design

Site designer J Taylor Design emphasizes the distinction between main and dependent items by placing secondary links below the main menu using a different color, font, and size. In this example, the user does not encounter a problem by distinguishing between primary and secondary sections.

Put links to user actions right

If you are developing a site that allows users to register, or a commercial site that has a “Basket” to buy goods, it would be better if you put links with these sections to the right of the menu (or in another place to the right, above). [For example, as Habr did it :)] There is no shamanism or parapsychology here, like “Logos in the right corner are perceived by 45.9% better than in the left,” just users are used to this arrangement.

Here are some examples of sites that visually separate links to actions in the main menu.

Xero

Sharify

Sharify and Xero place their links to actions in the same menu as the important links, but they retain the hierarchy, positioning them to the right, at some distance.

Search string as part of the menu

Another method that improves simplicity and convenience is to set the search on the right as part of the menu. The search is similar to all the functions mentioned earlier, so it requires a specific approach.
Once users are used to seeing action-oriented features, including the search box, on the right side of the page, leave space in this part of your site and for the search bar, if that is possible.

Some examples of this search location (including the aforementioned J Taylor Design):


Washtenaw Community College

Westcoast poppin

Avoid SUDDEN popup menus.

Drop-down menus are quite common in modern design, due to its ability to cope with the accumulation of links. However, you should visually tell the user whether the menu will open when you hover the mouse over it. This is best done with a small pointing down triangle or arrow.

Consider a few examples that follow this advice:

QN5 Music

Kinder-aktuell

Unfortunately, not all sites signal to the user about drop-down menus.

webstudios

billoneil.com

Different trends and styles

These examples do not necessarily need to be considered the best, but you should take a closer look at them when developing your own horizontal menu.

[The drive here is only thumbnails of images, so as not to clutter the page - approx. translator]:


Lorem ipsum


Arca lui Noe Hotel


The Art of Non-Conformity


Auditude


Mission Bicycle Company

Twitshirt

Jupiter Underfloor Heating

Cambridge Shakespeare Festival

The mindset game

Lanbruk's gunya

Glocal ventures

Owltastic

inkd

Eyemagine


Wetaskiwin Regional Public Schools


Full Cream Milk

My favoring thing

Conclusion

The methods recommended in this article are fairly general, and may not be a panacea in all cases. However, following these tips will allow visitors to your site to avoid confusion with the menu, because users usually get used to a certain style, and its unjustified violation will lead to a ton of curses on your head.

UPD: Links are provided for each screen.