Navigation bar, navigation, main menu and menu are all terms that refer to the same element of a site. Of course, we could go deeper and discuss the fact that the main menu is actually (usually) part of the navigation bar, which, unlike the menu, extends from one end of the page to the other (horizontally) and that the menu itself is actually part of the navigation bar, which also includes the logo, as well as potentially other elements, but in reality this would make it difficult to convey the information and is not particularly important at the moment.
In this sense, in this article about website navigation, we will equate all these terms to the same thing, namely – the menu bar and logo, which you can see at the top of almost every website.
When creating this navigation, we need to take into account and/or add the following elements:
Logo
Not only will your site’s logo be visible, thus showing users that they are on your brand site, but most users also expect that clicking on the logo will take them back to your site’s home page.
You can make the logo (or even the entire menu) disappear when you scroll down the page and return when you scroll up. This way, especially when users are browsing your site using mobile devices, you will free up more space for browsing the main information.
Structure
Since, especially with larger sites, you cannot add absolutely every page to the main menu, it is a good idea to consider which pages will be visible. Make sure that your most important links are visible and not placed in a submenu. The links placed in the submenus should also be carefully selected, but their role is to reflect the interests and be relevant to more niche users. That is, those who are looking for something more specific.
Let’s say you have a site through which you display your portfolio as web designers. In the external (visible without interaction) menu, you should indicate the more general things. Let’s say, “services”, “portfolio”, “partners”, “contacts”, “about me”.
In a possible submenu of services, you could write things like “website development”, “website technical audit”, “website maintenance”.
That way, people who are looking for a specific service could go directly to this page, and those who don’t yet know what they need can look at your “services” page to get oriented.
Keep in mind that the optimal number of menu levels is two. Anything deeper, more specific (more niche) should be separated into the footer or accessible through more basic pages.
Location
Navigation is usually (but not necessarily) at the top of the page. Whether yours is there or you use vertical navigation, the important thing is that the navigation is in the same place on every page of your site.
Contrast
Again, as when we talked about tables, we should note that the contrast does not need to be stark, but it should be visible. Users should be able to easily distinguish the main menu from the rest of your site’s page.
This can be achieved, for example, by making a distinct visual change when scrolling. Such visible changes could be expressed in changing the background color of the menu or adding a shadow (box-shadow).
Call to action (CTA)
A call to action or call to action is one of the key elements of digital marketing. It is an element whose function is divided between marketing and design, although in the real world it is difficult to separate one from the other, since design serves to convey messages, which marketing uses to achieve goals. In any case, a call to action is not only text, but also a vision that attracts attention and … calls to action.
These could be large elements that describe the benefits of “buying right now”, such could also be buttons placed in the right places, emitting the right messages.
In the menu, obviously, calls to action should be buttons.
If you have more than one action that your customers can take to satisfy your business goals, then you should show it through color and shape, rather than directly telling the user which is more important to you.
For priority and secondary actions, you can read more in our article about buttons.
Adaptability
Adaptability is one of those themes in web design that keeps coming up over and over again, as it affects all elements. The menu should also be in line with these trends.
Icons (optional)
Icons serve to visually reinforce the message you are trying to send through the text you have chosen, to show the user what to expect if they decide to follow the link to one or another page.
You could add icons or emoticons to indicate the direction in which you are taking the user.
Crumbs (optional)
Crumbs or breadcrumbs are element of web design through which we show the user where they are in the hierarchy of pages. If you remember the story of Hansel and Gretel, where they scattered crumbs so they could get home, you will understand the concept of crumbs in the realm of web design. Unlike Hansel and Gretel’s crumbs, which were eaten by the birds, however, crumbs on a website always take users to the previous or earlier steps, helping them navigate the hierarchy of the site and the path they took to get where they are.
You could place such an element near the menu (but not on every page, rather on the deeper/specific/niche ones) so that users can navigate from another (small but important) piece of information (pun intended) when building context in their minds about where they are on your site.
