Useful List of Responsive Navigation and Menu Patterns

responsive-navigationHaving 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!

Responsive Navigation and Menu Patterns

1. Slidebars

resp-18-d

Desktop Layout

resp-18-m

Mobile content slides in.

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

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

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…