Top 5 Website Menu Design Trends

General Reading Time: 3 minutes


Top 5 Website Design Trends

Over the last three years web design has been changing astronomically with responsive web design being one of the main fundamentals. Today we will focus on the top 5 website menu design trends in 2015. I have listed five that have become the most common trends in 2015.

1. Nav Realignment Menus

Here’s a UI trend where you keep the navigation links together but just realign the positioning. This could be vertical or horizontal, really doesn’t matter as long as the links fit and still make sense on smaller screens.

Screen Shot 2015-10-05 at 11.58.07Screen Shot 2015-10-05 at 11.57.49






Stinkdigital moves their navigation into a horizontal block right beneath the logo, which is a clever way of keeping the menu together with the logo.

2. The hamburger icon Menus

Three little bars used to indicate a link to a menu—is one of the most controversial techniques on the web right now. The hamburger icon is easily scalable and it fits cleanly into a pixel grid. It was originally a list icon that has been press-ganged into its current role, but since a menu is simply a list of options, it’s semantically correct to use the list item in this way.

Screen Shot 2015-10-05 at 12.18.15





Squarespace site is a lovely example of how to effectively use hidden menus. On this site the tour and login options are always visible.

3. Full Screen Navigation Menus

The third trend, is the use of full screen navigation menus. These menus are typically activated by a button or link of some type; quite frequently a navicon. The difference here is that instead of a small panel that slides out, the navigation takes over the entire screen. On mobile this feels normal, but on the desktop this is actually a new and interesting approach.

Screen Shot 2015-10-05 at 12.31.04

Huge site shows a great example of this where the navigation menu is full screen for users to access via a navicon (hamburger icon).

4. Vertically Elongated Menus

Using a wide horizontal menu with the combination of a small responsive screen doesn’t always bode well. One of the cleanest solutions would be realigning the menu towards a vertical display instead of horizontal.

Beyond that responsive threshold it would help users to see all the links in a formal vertical list which is easier to tap and browse. An example of this:

Screen Shot 2015-10-05 at 12.43.10Screen Shot 2015-10-05 at 12.48.17





Hirondelle has an exceptionally good responsive navigation system, the horizontal links are clear and easy to read.

5. Off-Canvas Menus

A popular navigation design pattern we’re now seeing more and more of is the off-canvas menu.  So how does it work? An off-canvas menu: The user clicks an icon or performs some sort of action (e.g. swiping left to right on a touchscreen device) that results in a vertical navigation menu sliding onto the screen from off- canvas. You don’t necessarily need to use a navicon (hamburger icon) as the trigger of your off-canvas menu; you can also use a button labeled with a conventional term like “Menu”.

Screen Shot 2015-10-05 at 12.59.29 Screen Shot 2015-10-05 at 13.00.52




An example of this would be the Youtube site where the navigation bar is hidden when you first enter the page but by clicking on the icon on the left it will pop out the menu on the left hand side.

In my opinion these new trends are here to stay for a pretty good time however there are always new trends on the web that evolve each year with the intention to make the user experience simple and present information in the best way possible.

If you’re looking for a website with a great menu design, feel free to contact our friendly team at Damteq!

[su_button url=”” style=”soft” background=”#00a1c9″ size=”10″ wide=”yes” center=”yes” radius=”5″ icon=”icon: arrow-circle-o-right”]WANT A WEBSITE DESIGNED FOR YOU? CONTACT US TO FIND OUT MORE![/su_button]