10+ Responsive Menus and Navigation Solutions

Hey You!

Before you spend countless hours working on a responsive menu, just stop and wonder how many people will actually use the thing!

See my own tests and analytics at the end of the article. Be wary: Users are engaging less and less with navigation items.

So we’re stuck with the header navigation…

1. PriorityNav.js

This is a great solution. Doesn’t hide everything under a button, but displays what it can depending on viewport size. Sometimes called Priority+ Navigation.

Very small JS (5kb), no dependencies on jQuery.

DEMODOWNLOAD

 

2. OkayNav

Another Priority+ solution. Items disappear on a smaller viewport but still accessible under the dot menu.

Also vanilla Javascript (no jQuery dependency).  There is a jQuery version that seems to have some extra features (swipable).

DEMODOWNLOAD

Advertisement

 

3. FlexMenu

Priority+ – this one requires jQuery but has a bunch of options.

DEMODOWNLOAD

 

4. Priority Navigation

You can assign priority for each menu item. Lower priority disappears first.

This one is dependent on jQuery.

DEMODOWNLOAD

4. The Leanest Possible Responsive Menu

Check out this article by Dan. It’s the easiest way to create a simple responsive menu.

There’s about 6 lines of JavaScript and not a lot of CSS.

DEMO

 

5. SlickNav

SlickNav is the traditional responsive menu that puts items into a dropdown ‘drawer’.  It is one of the more robust solutions that handles multi-level dropdowns and has solid browser support.

It requires jQuery.

DEMO & DOWNLOAD

 

6. WordPress Responsive Menu

Arguably the most popular drop-in nav solution for WordPress. Has a multitude of options, but is basically a slide-in off-canvas type menu.

Over 90k downloads and 5 star ratings.

DEMODOWNLOAD

 

 

7. Mega Dropdown

This powerful solution is for highly complex menus that might include images, icons, multiple levels. In desktop – all items are hidden inside the dropdown, but will expand out using the viewport.

In mobile, items are altered to fill the mobile viewport.

This clever animation is from the CodyHouse site. The menu needs jQuery.

DEMODOWNLOADTUTORIAL

 

8. Responsive Overlay

This pattern has appeared over the last few years. The entire viewport is replaced with a scrollable menu. Both desktop and mobile have the same action.

Relies on jQuery. If you want to add some nice animated transitions, take a look at this example.

DEMO

 

9. CSS Only Slide Down Menu

Part of a tutorial on Smashing Magazine, this solution makes use the of the CSS :target selector to toggle a menu. No JavaScript in sight.

Note that the actions are the same for mobile and desktop.

DEMOTUTORIAL

 

10. Full Screen Overlay Menu

A nice tutorial and demo for another overlay menu solution. Again, these solutions present the same menu actions for desktop and mobile.

The demo depends on jQuery – but that’s really not necessary as you can easily replace the toggleClass function with some vanilla JS. Of course if you are already using jQuery that’s not an issue.

DEMOTUTORIAL

 

11. Hamburger Animations

This isn’t a responsive menu as such, but if you’re using the hamburger icon, take a look at these awesome toggle animations.

See at Codepen

 

So, What Should You Use?

I’ve come to believe that the more you hide elements away – the less they will be used, which is why I’m starting to favour Priority+ type menus (see other alternatives to the hamburger).

Looking at my analytics for one site (with this type of menu) shows the visible items are clicked much more than dropdown menus are.

However priority menus are only good if you have a handful of high level menu items. If you have a more interactive site, you could go for off-canvas multi-level menus.

Take note: Users Are Ignoring Off-Canvas Navigation

Responsive design continues to evolve from my original roundup of responsive menus. Much has changed since I first debated the 3-line hamburger menu. My original AB Tests showed that the word “MENU” was tapped significantly more than the so-called hamburger icon.

Over a year later I repeated the test and discovered that the hamburger icon had caught up. The test showed something far more disturbing:

Mobile users are interacting with navigation elements a whole lot less than they used to be.

It has now been two years since that AB test and I would suggest that interaction has dropped even further. Without getting pedantic about the numbers, a quick glance at these graphs will show it.

This is mobile sessions on my site since 2014. 2016 was a good year:

This is the number of clicks or taps on the mobile menu button. They are recorded as a Google Analytics event:

Doesn’t take a genius to see that users aren’t tapping menu buttons much anymore.

Hi, I'm James, and for the last decade I've made a living by making my own blogs and websites.
Updated: February 21, 2017

Add a Comment