Useful List of Responsive Navigation and Menu Patterns

This post has been superseded by an updated version.

See 10+ Responsive Menu and Navigation Solutions

Having functional navigation that works on both mobile and desktop platforms is challenging.

  • Should the mobile have fewer navigation options?
  • Will the user figure out how to use it?
  • What if you are converting an existing desktop site?

Fortunately there is a growing number of stunning examples and tutorials to be found. Even with these it’s still difficult!

1. Slidebars

Mobile - menu slides in

Mobile – menu slides in

This jQuery-based solution is under active development for the past couple of years and has been tested in a number of environments. Lightweight (1.69k gzip js and css).

I am now using this on a production site – it seems to work well. I also added multi-level menus in my implementation.

Link: adchsm.com/slidebars

2. Responsive Nav – Slidedown Menu

Desktop Layout Menu

Desktop Layout Menu

Equivalent mobile layout (after tapping the nav icon).

Equivalent mobile layout (after tapping the nav icon).

A very clean Javascript solution (NOT dependent on jQuery) that uses CSS3 transitions.

Link: responsive-nav.com

Advertisement

3. Codrops – Slide and Push Menus

resp3-cod-m

Example slide in menu.

No desktop image shown as there is no default desktop menu.

A tutorial that shows how to slide menus in from the left, right, top, or bottom. It is not a complete drop-in solution.

Uses Javascript to trigger CSS3 transitions. You would need to do some additional CSS work to make the menu appear in both desktop and mobile layouts.

Tutorial: tympanus.net/codrops/2013/04/17/slide-and-push-menus/
Demo: tympanus.net/Blueprints/SlidePushMenus/

4. Codrops – Multi-level Dropdown Menu

resp4-cod-m

Clicking menu item will transition in a new sub-menu.

Another tutorial from the clever people at codrops.

Clicking / tapping the navigation icon brings up a menu (all kinds of different transition demos). Clicking a menu item will bring in a submenu that replaces the top-level menu. Very much experimental with some jQuery.

Tutorial: tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
Demo: tympanus.net/Development/ResponsiveMultiLevelMenu/

5. FlexNav – Dropdown Multi-level Menu

Desktop multi-level menu.

Desktop multi-level menu.

Mobile menu showing Item 2 expanded.

Mobile menu showing Item 2 expanded.

A jQuery plugin that will take an existing multi-level menu and convert it to a dropdown for mobile.

Solid browser support (includes IE 7-10), but uses jQuery animations.

Link: jasonweaver.name/lab/flexiblenavigation/

6. Codrops – Multi-Layout Menu

Desktop layout - wide menu.

Desktop layout – wide menu.

Tablet layout

Tablet layout

Mobile layout. Will drop down on tapping Nav icon.

Mobile layout. Will drop down on tapping Nav icon.

This tutorial shows a menu with 3 different layouts depending on device width. Uses retina-friendly icon fonts, and hover transitions (which obviously won’t happen on touch devices).

Uses some hefty CSS, and a small amount of Javascript (NOT dependent on jQuery) to activate the appropriate classes.

Demo: tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
Tutorial: tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/

7. Smashing Magazine – Slideout menu

Default desktop layout.

Default desktop layout.

Mobile menu after the nav icon is clicked.

Mobile menu after the nav icon is clicked.

This is a tutorial.

This solution uses CSS3 animation, some Javascript (uses jQuery).

Tutorial: SmashingMagazine.com
Demo: dbushell.github.io/Responsive-Off-Canvas-Menu/step4.html

8. jPanelMenu – Slideout Menu

Clicking the nav icon brings the menu in and out.

Clicking the nav icon brings the menu in and out.

This is a jQuery plugin that turns some menu markup into an off-canvas slide in menu. It has a ton of options, but seems to use jQuery animation (not great for mobile performance.

Update: There is also a “transforms” build which uses CSS3 transforms over jQuery animation.

Link: jpanelmenu.com

9. Top Drawer – Slidedown Menu

Click the menu icon (top right) and menu slides down or up.

Click the menu icon (top right) and menu slides down or up.

An experiment by Jordan Moore that uses pretty much CSS only. There is a small piece of Javascript that assigns the class when the nav icon is clicked.

It does use CSS Transforms (resulting in smooth and fast performance on mobile) BUT – it has fixed heights on the menu. Nice experiment but would need some work to get production-ready.

Note the mobile and desktop layouts are no different.

Link: www.jordanm.co.uk/lab/topdrawer

10. Twitter Bootstrap 3 – Slidedown Menu

A full-up navbar on desktop.

A full-up navbar on desktop.

The same menu on mobile. I have clicked the Dropdown.

The same menu on mobile. I have clicked the Dropdown.

Twitter Bootstrap has a navbar component that can be implemented on a responsive site. It will convert the horizontal menu into a slidedown with a nav icon. It handles all the different items Bootstrap allows you to place in a menu (a submenu and a search field).

Bootstrap is amazing, but it is bloated, and like most frameworks there are a million options at your disposal. However you can selectively build the CSS and Javascript required for just a navbar component, but be wary of dependencies.

Link: getbootstrap.com/components

11. jQuery Navobile Slideout Menu

Desktop - menu is a bit hard to see.

Desktop – menu is a bit hard to see.

Mobile layout with menu open.

Mobile layout with menu open.

Similar to jPanelMenu above. This jQuery plugin allows you to make an existing menu become a slideout menu on mobile views.

It has the additional functionality of swiping and even the ability to drag out the menu –  as long as you include the hammerjs library. Uses CSS3 transforms for the animation.

Dependent on jQuery and Modernizr.

Link: madebymade.github.io/jquery-navobile/

12. Bamboo – Slideout Menu

Default desktop layout, showing existing left sidebar nav.

Default desktop layout, showing existing left sidebar nav.

Mobile layout with nav icon clicked.

Mobile layout with nav icon clicked.

This jQuery plugin is slightly different as it allows an existing left sidebar navigation to be your main nav (all other solutions only seem to work with the traditional horizontal nav bar).

Demo: www.andrewgreig.com/demo/bamboo/
Link: http://www.andrewgreig.com/617/

13. Codrops – Multi-Level Slide in and out

resp13-mlm-m

Mary Lou at Codrops has designed a very clever multi-menu that handles lots of sub-menus. It uses 3D transforms for optimal speed, and is a truly clever piece of work.

Github: github.com/codrops/MultiLevelPushMenu
Tutorial: tympanus.net/codrops/2013/08/13/multi-level-push-menu/
Demo: tympanus.net/Development/MultiLevelPushMenu/

14. Webdesignerwall – Mid page responsive menu

Desktop Horizontal Nav

Desktop Horizontal Nav

Mobile Menu

Mobile Menu

The nice piece of CSS3 magic takes a horizontal nav bar, and turns into nice dropdown on mobiles.

No Javascript.

Tutorial: webdesignerwall.com/tutorials/css-responsive-navigation-menu
Demo: webdesignerwall.com/demo/responsive-menu

15. jQuery Pageslide

Desktop menu

Desktop menu

Mobile menu

Mobile menu

This is a clean small jQuery plugin (just 1.5kb), with minimal CSS involved. It’s a little older and doesn’t make use of CSS3 transforms.

You can slide in content from left or right, and even set the content as modal.

Tutorial: srobbin.com/jquery-plugins/pageslide/
Demo: srobbin.github.io/jquery-pageslide/

 16. Mmenu – jQuery slider

Mmenu is a powerful plugin with some great options (including slide down sub-menus). However it does have a heavier footprint (16KB minified JS + a fair stack of CSS).

resp16-m

Demo and Download: mmenu.frebsite.nl/

17. ReSmenu

Desktop layout - multi-level layouts.

Desktop layout – multi-level layouts.

 

A screen capture from ios7

A screen capture from ios7

A lightweight (~1kb) jQuery plugin that converts a multi-level navigation list into a select element when the viewport is small.

Demo and Download: codeb.it/resmenu/

18. Sidr – Left and Right Slideout

resp1-sidr-d

Mobile Layout - Left Slideout

This is a powerful jQuery plugin that handles both left and right slide-in menus. It also handles touch events on mobile devices.

You can have multiple menus, or assign an existing menu as a “Sidr”.

Powerful – however it looks to me like it uses jQuery animation, rather than using hardware-accelerated transitions for the animation.

Link: www.berriart.com/sidr

19. Fixed Nav

fixed-nav4This newer offering from Adtile uses vanilla JavaScript (no jQuery), and sets up a fixed navbar. It uses Fastclick (to remove the 300ms click delay on mobile browsers).

Nice clean implementation.

Link: http://blog.adtile.me/2014/03/03/responsive-fixed-one-page-navigation/
Demo: http://www.adtile.me/fixed-nav/
Github: https://github.com/adtile/fixed-nav

20. MeanMenu

meanmenu_mPart of MeanThemes (wordpress theme), this is a jQuery plugin that allows multi-level menus. They will slidedown.

Also available as a paid WordPress plugin.

Link: http://www.meanthemes.com/plugins/meanmenu/
Demo: http://www.meanthemes.com/demo/meanmenu/demo.html

21. Snap.js

resp21-mSnap.js is a vanilla Javascript (jQuery not required) that allows off-canvas menus to slide in from the left or right.

As well has tapping the menu icon, you can also drag in the menu (and it will snap to a certain position).

Demo: http://jakiestfu.github.io/Snap.js/demo/apps/default.html

22. Responsive Navigation

Mobile Menu

Mobile menu.

 

Despite the rather generic name of this script, it allows something that few others do: Multi-level menus where you can visit the top level menu OR drill down further.

Some commenters have requested this, but I do wonder if this pattern is confusing to users.

This is a paid script, reliant on jQuery. It also has a WordPress plugin implementation.

Demo: http://www.responsive-navigation.com/

Trying to Fit Data Tables Into Your Responsive Site?

And Also Look Here…

I’ll try to keep this page updated as I come across interesting solutions.

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

98 Comments

  1. Hey James,

    Loved this article, should we make it better?

    It would be so generous of you if you can add some 2016 latest navigation menu to this article.

    I just created a navigation menu in March 2016 that could be used in this article.

    Please check it and add if you like. Your article will be more awesome with my menu 🙂

    http://themestruck.com/theme/vertical-sidebar-navigation-starter-bootstrap-template/

    Have been working soo hard but as have to connect with peoples like you get the word out. I am not making any money of it, just wanted to add some value to your article.

    Would love to connect personally too.

    Nikhil,
    Thanks brother,
    Stay Strong.

  2. MeanMenu don’t work with Firefox Mobile…
    You can try it!
    Fabry

  3. Its amazing design and result guys

  4. vary nice

  5. Thanks for the helpful list.

  6. thanks for this

  7. Thanks for sharing the list – bookmarked this sucker. We used mmenu on a custom WordPress site (http://turtlerockpreschool.com) and it’s damn slick. Works great with mega menus as well.

  8. Very useful. Thanks!

  9. Just published a new release of Offside.js: Minimal JavaScript kit without library dependencies to push things off-canvas using using just class manipulation. Enjoy it!
    https://github.com/toomuchdesign/offside

  10. very nice and usefull but idont know why none off this dont work on my website…

  11. Work fine and fluid only “Smashing Magazine’s” example. Other example are bad!

  12. Thanks for sharing. I give mmenu a vote. It’s very powerful menu plugin that makes my website look more professional. If you’re interested in mmenu plugin, here is a Live Demo (My site).

  13. Great collection. Really useful. thanks to you sir

  14. great article and useful lesson, thank you

  15. How about responsivemultimenu.com solution?

  16. Very impressive list of menus. You can refer “http://responsivecss.net/” for more examples on live responsive examples.

  17. Hello. I found really awesomeand modern menus in your website, but with a problem. How Can I change these menus to right-to-left menus?? Please help me and write which part of CSS file should I change to work properly? I am waiting for your answer. thanks

  18. OUTSTANDING!
    Thank you so much for the premium resource!
    Cheers!
    R!

  19. so helpful, i like it

  20. This is a very helpful resource, thank you very much!

  21. Great examples !
    Thanks !

  22. excellent work really helpful

  23. Thanks a lot for collections

  24. Worth getting a look on some of the menus. You’ve included some of the best in your collection and thank you for that.

  25. Really Was Amazing , Thank So Much

  26. Amazing ! , Thank You So Much

  27. Thanks for sharing!

  28. I was stuck trying to find a menu system that would allow users to access the parent page as well as toggle open child pages in mobile. Found this one and it works perfect: http://www.responsive-navigation.com. Hope it helps.

    • Thanks, nice find.

  29. Really Awesome Exemples of responsive Navigation menus. A lot more then for sharing this.

  30. Its Really Helpful for us. I’m using Codrops – Multi-level Dropdown Menu Templates, Thanks for sharing.. http://dotfusion.in/

  31. Thanks for the helpfull list.

  32. its really helpful when we find such a hilarious solutions of web designs..its only on existweb.net..nice job sir…i am really thankful to you..

  33. Thank you for the amazing list! One question I’ve been struggling with: on many of these, users can drill down through multiple levels, but I don’t see how they can navigate to top level pages that have levels below them. For example: #4 Codrops…how does a user arrive at the Electronics page? When they tap that page, they only get the subnavigation.

    (#5 Flexnav and #15 mMenu are exceptions.)

    • Good question. The examples you’ve mentioned are not designed to arrive at a top-level page, but allow the user to access deeper levels.

      It can be confusing for the user: They are attempting to drill-down, but then discover that they have triggered a load of a new top-level page… as well as revealing sub-menus.

      • Yes. And if that’s the case, that means that the user can *only* get to the lowest-level page in any information hierarchy. Which doesn’t work for any site more than 2 levels deep.

        I’ll continue to check back to see if anyone has any solutions/examples of nav that surmount this. Thanks again for pulling all this together!

  34. I ordered your responsive drop-down navigation, but I am not sure the order was processed and I did not get a page confirming the order, or did not receive and email message.

    Can you confirm the order was received?

    Lawrence Keeney

    • Lawrence, I don’t sell any solutions here. This is a roundup of all the different options I had bookmarked. You will need to direct your inquiry to the vendor.

  35. Thanks for sharing

  36. Fantastic list. Thanks for sharing!

  37. Great work sir! Thank you very very much! u rock man!

  38. Hey, by the way thanks for the very advanced and qualified listing of the resposnive navigations.

    I really like: 4. Codrops – Multi-level Dropdown Menu

    And the best news is, concerning to it’s website, the css-style is even free to copy for commercial projects 🙂

    brilliant.

  39. tnx. it was very userfull for me.

  40. well,that is very usefull source for me thanks for share

  41. are you sur Mmenu – jQuery slider has “swipe to open” ?!

    • Urgh. I just checked it again on mobile. It looked like a swipe, but actually it just closes on a touchstart event anywhere outside of the menu.

  42. This is great, but sometimes I wish to see the desktop menu AND the mobile one.

    • In what context?

  43. Wow! You are great! If the world had more people like you it would be a better place. You do make a difference. I was searching responsive menu on Google and I found your website. You have saved my times!!! Thank you for million times

    • No. YOU are great.

  44. Great work.

    I must redesign the site , need a good responsive solution with separate menu for mobile.

    In your opinion, best to go with sidr or slidears?

    • I suggest you try one out – like slidebars, and see if it works for you, you can always contact the author and suggest a feature change.

  45. I have tried almost all off-canvas menus and there seems to be a problem with all of ’em, which is most of the plugins require you to wrap your content to some class. I have found mmenu to be cool except it uses jquery transitions and has a problem with fixed element.

    • Hi Magna,

      My name is Adam, I’m the author of Slidebars.

      Yes, Slidebars does require your content to be wrapped with an id, however this is to ensure the correct styling is added on the page load and not applied to your own wrapper when the page has finished loading and the plugin is initiated. You could however replace all instances of #sb-site with your own though (in both js and css).

      I created Slidebars for two reasons you also mentioned: Fixed positions and CSS transitions. Slidebars has a few different animation methods to ensure it works on a wide range of browsers. It also has a solution for position:fixed; so you can have that top navbar!

      Feel free to get in contact with me if you would like more info or any assistance setting it up.

      Thanks, Adam.

  46. Thanks for a great list!
    I decided to go for Mmenu after reading some of the comments, but I have a hard time to make it work on Safari and Chrome (mobile or not). It appears to be broken. On Firefox works deliciously, but of course that’s not enough.

    Had you guys a similar experience?

    • I found out. It was a transition effect applied via CSS to the . Apparently that was messing things up for WebKit browsers.

  47. Mmenu is awesome work! Thanks.

    • Mmenu is a nice solution.

  48. Codrops looks utterly gorgeous… until you try IE8!

    • IE8 is a difficult one. I’ve now dropped support for IE7 on anything I’m doing. With microsoft ending support for Windows XP in April 2014, I suspect we will see a drop in IE8 soon.

  49. any responsive navigation same with joomla.org? thank you

    • That will depend on which Joomla template you are using.

  50. Good selection I will bookmark this page to come back to again. Thanks for the share!

    • You’re welcome. Nice business you’ve got there.

  51. I think mmenu is also good to mention: http://mmenu.frebsite.nl/.
    I’m using it for quite a while and it’s very userfriendly and easy to implement.

    • Nice. Will add it to the list.

  52. bookmarked 🙂 thanks

  53. I was looking for this. Great stuff, thx.

  54. Really great resource. Thanks.

    • You’re welcome. I’ll try to keep the page updated as I come across more solutions.

      • I m trainee so i want to know about the drop down icon. How to change them ?

      • This resources are good but not as creative, we can also show menu on popup in mobile, which looks better than slide menu in my opinion

Add a Comment