blog post image

5 Styles Of Menu Navigation

The evolution of one of the key elements of any website, the menu, has provided much inspiration for web developers looking to find the best user experience for browsers navigating through a website.

Here are 5 types of navigation menus being used right now.

 

1. Hamburger Menu

The Navicon or Hamburger menu has been widely adopted over the last few years as a way to display a hidden menu on mobile screens without taking up too much room.  

This option uses the icon symbol of 3 lines that people have come to recognise as a menu navigation.  

This icon has since crept into desktop websites looking to present a sleek and minimal design.  

 5 Styles Of Menu Navigation 1

Ferdinand Humberg

 

2. Full Screen Navigation Menu

This form of menu can take a few different forms, the main feature being that it occupies a large part of the screen.

It could combine with the hamburger menu in the above example to open a full screen menu like so:

5 Styles Of Menu Navigation 2

 

Or a block like form using the full screen broken into sections to navigate deeper into the site. 

5 Styles Of Menu Navigation 3

Photuanlan

 

Or a large words spanning the full screen placing the menu front and centre.

5 Styles Of Menu Navigation 4

Aria Studios

  

3. Mega Menu Navigation

 These types of menu are designed to drop down and reveal deeper levels of a websites navigation.  Mega menus tend to suit websites with a large amount of content to include in the navigation.  For the mobile responsive design it is recommended to incorporate it with an accordion style expansion function to minimise the space it takes up on smaller screens. 

Our own BTL website uses this type of menu.

5 Styles Of Menu Navigation 5 

 

4. Fixed Navigation

Fixed navigation or sticky navigation as the name suggests fixes the navigation bar in one place as the user scrolls or navigates through the site.  This menu helps the user to easily navigate to different parts of a website and easily return to a particular area using the fixed menu.

5 Styles Of Menu Navigation 6

Powderlife 

 

5. Infinite Scroll

Infinite scroll has been made possible due to people's familiarity with long scrolling on mobile touch screens.  For menus it enables a user to scroll through a website's pages rather than clicking on a menu bar.  

It is good practice to include a prompt to direct the user, like the 'Scroll Down' shown below.  As a backup the user can simply revert to the regular menu buttons listed across the top.

5 Styles Of Menu Navigation 7

The Brave 

%MC

EPASTEBIN%