Useful List of Responsive Navigation and Menu Patterns

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

This new jQuery-based solution is under active development has been tested in a number of environments (including older Android phones). Lightweight (1.5k gzip js and css).

It uses CSS transforms where possible, and fallback to jQuery animate.

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

Link: http://plugins.adchsm.me/slidebars/

2. Responsive Nav – Slidedown Menu

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

Link: responsive-nav.com

3. Codrops – Slide and Push Menus

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

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

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

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

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

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

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

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

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 todrag 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

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

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

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

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).

Demo and Download: mmenu.frebsite.nl/

17. ReSmenu

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

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

This 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

Part 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

Snap.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

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/