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

2 Comments

  1. Hey, this is a great article! As a UI/UX designer myself, I haven’t felt that the hamburger menu icon really helped users navigate the site easier. Sure, it looks neat, but half the people don’t understand what it is or why it is there.

    Over the past couple of years, I have been helping (not teaching) the elderly navigate several different complex website or app UIs (Facebook for example, and WhatsApp for another), and one thing I’ve found is that three lines don’t signify a navigation menu better than the word “menu” describes itself. I’ve also seen that people often navigate (or tend to click on) by tapping on items that are visible to them and are there front and centre.

    What else do you think designers should use for mobile navigation? On the desktop web, laying out the links in a line as a header at the top works really well, but unfortunately, there isn’t any good way to translate that to a mobile responsive design. Yes, the Priority solutions work, but I think from a design perspective, it kind of loses the aesthetic design when items keep disappearing on smaller viewports.

    • I don’t think there will ever be a good answer to mobile navigation. I believe that users hardly interact at all with ANY navigation elements when mobile (at least this is what some of my stats show).

      It’s interesting that many popular mobile apps (spotify, fb, etc) ditched their hamburger menus some time ago, and went to using the footer toolbar. However for web, this would be an unusual pattern to use. So we’re stuck with all kinds of solutions.

Add a Comment