Horizontal menus are 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 benefits 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 ensure the ease of use of horizontal menus, as well as note some less effective solutions. Also, we will pay attention to a couple of trends that may help developers to work on horizontal menus in future projects.

Use well-known names for links.

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 that he will consciously pay attention to. If this element is well designed, 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 obscure navigation if they cannot immediately find the necessary data.

So, the link to the About Us page should be titled About Us [Thank you, Cap - approx. translator] or “Contacts”, a link to the services section is called “Services” or “Our Services”
Excessive creativity in the process of naming 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 in the most unusual circumstances, do not name 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, unknowingly avoid unfamiliar or incomprehensible words and phrases.

Clearly identify major and minor sections

Once you find out which parts of your site are primary and which are secondary in importance to a potential user, you can visually create a hierarchical menu structure that will increase the usability of your site.

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

Let's look at a few examples:

Edwards & Hampson

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

A similar example:

Deliciouslyorkshire

Links on The Deliciouslyorkshire's website leading to important sections ("Home", "About", "News and events", "Recipes") are located next to what would seem to be secondary sections ("Promotions" , “Useful links”). Both types of links have the appearance of bookmarks, without 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 for designing 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 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

Website 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 to the right

If you are developing a site that allows users to register, or a commercial site that has a “Basket” for purchasing 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, at the top). [For example, as Habr did :) :) There is no shamanism or parapsychology here, like "Logos in the right corner are perceived 45.9% better than in the left", just users are used to this arrangement.

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

Xero

Sharify

Sharify and Xero place their action links on the same menu as important links, but they retain the hierarchy by placing them to the right, at some distance.

Search bar as part of a menu

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

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


Washtenaw Community College

Westcoast Poppin

Avoid SUDDEN drop-down menus

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

Let's

look at a few examples following this tip : QN5 Music

Kinder-aktuell

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

webstudios

billoneil.com

Different trends and styles

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

[I bring here only thumbnails of images so as not to clutter up 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 Favorite 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.