6 examples of navigation menu for your website
The navigation menu is one of the most important factors on your website , it must be designed to give accessibility to the content of your website as well as oriented to a flow that generates conversions.
The advantages of having a good navigation menu
- Differentiation
- Content accessibility
- A good wearing experience
- Generate more conversions
The following example is a case study where an A / B testing was implemented , in which it was determined that the low amount of conversions was due to the navigation map, so the new menu was defined accordingly.
What is a navigation menu or sitemap?
A navigation menu or sitemap is the diagram or structure that organizes content and directs user flow on your website.
This is a fundamental section in the development of your website, from initial stages prior to design as well as in continuous improvement.
How to define a navigation menu?
The way to create a navigation map is highly variable as it depends on the way your product or service is categorized, but a starting point is to determine what you offer and what your potential customer is looking for.
- List what you offer your products or services
- Prioritize what is most important or what you want to show first
- Categorize into blocks and name that category
- Structure diagram with pencil and paper
- Validate with a group of people preferably your clients
Important
Analyze your competition but do not copy it, one way to differentiate yourself is based on how you show the content to your users, so if the turn allows it, jump out of the box and try that it gives better results.
Recommendations for your navigation menu
There are no rules for the design of your navigation map, however there are certain guidelines that are proven to work better in certain cases, then we leave you the cases.
1 - Burger menu
The hamburger menu is the 3 lines that the menu displays in the mobile version, this mode of use arose with the rise of mobile devices, this has been necessary to make the content accessible on a reduced screen, which is excellent.
The problem starts when one seeks to transfer this form of use to the desktop version which in many cases is unnecessary, and I will tell you why?
The reason for using a hidden menu is a mobile phone is because of the small screen size, so you have to take care that what is shown is the most relevant, unlike a pc or laptop screen, the space is several times larger so hiding the content in a menu increases a step in addition to hiding the user's navigation map
Due to this we recommend you only use the hamburger menu in the mobile version and a full links menu in the desktop version.
2 - The 3 levels of depth
A good practice to define the flow of your navigation menu is to make the user find your content in no more than 3 clicks, so try to find a way to reduce the steps.
In a services website, it is convenient to have a linear structure so that the detail of each service is shown at a second level
A structure where the content is more extensive, the detail of the service is passed to a 3rd level
In an e-commerce, categorization is key since the payment process makes the path more extensive, you can organize them in this way.
How to design the navigation menu?
Once your navigation flow is defined, it is time to start the web design and layout stage, for this you have to distinguish between the two versions of how the site is presented to the user and its different implications.
Desktop and mobile version
It is well known that for years mobile traffic has exceeded desktop traffic by more than 60%, and in our experience in some cases desktop traffic is minimal, so it is essential to make the browsing experience as smooth as possible. possible in the mobile version.
This will allow you to obtain better results with your website, so the following examples include both desktop and mobile versions.
6 Types of navigation menu for your website
1 - One page
The term means "a page" which is an excellent option when you present a product or service with precise specifications since the horizontal scroll format facilitates the content in a visual and animated way.
This great example from parrot shows the product features and specifications where the navigation menu is in the form of dots on the right side of the page.
2 - Standard menu
This type of menu is formed by showing the most relevant and precise in order to reduce the steps to reach the content, as well as expand the content on the destination page
https://tupanel.solar/
In this example the website Tupanel.solar clearly and efficiently displays various services on fewer pages.
3 - Drop-down menu
The drop-down menus can contain the subcategories, products or services that when the pointer is passed over the element it displays the options and on mobile, tapping on the element displays the content
In this example, it is shown that way, in addition to integrating an internal menu in the form of tabs, which once inside the page facilitates navigation between the same category.
4 - Megamenu
This type of menu is ideal when the content of your website is extensive and you are looking to organize by categories, characteristics or other requirements.
The case of stripe shows us various types of megamenu where the different specifications and functionalities of your product are specified in each section.
5 - E-commerce
The menu of an e-commerce is generally organized by product categories where subcategories or products are displayed directly so that the level of depth of the product detail is level 3
In this example the menu structure shows the detail of the product in the second or third level which is quite effective.
6 - The exception to the hamburger menu
We talked about how not to use the hamburger menu in the desktop version but there are exceptions to this as you will see in this example where in addition to the spectacular design, the menu is integrated into the experience of the site giving a positive result
This example shows the menu with extensive content as well as integrated into the experience on the site.
Navigation menu in footer
It is also important to rescue the footer section of the website since it is usually one of the sections that are not paid attention and that are a source of extra information for the user.
In the footer we can extend and place the links of less relevance that due to their better priority you would not place in the header section.
