12/6/13 Useful List of Responsive Navigation and Menu Patterns

Exis Web

About
Contact

Useful List of Responsive Navigation and Menu

Patterns

James Foster

The joy of being alive and building websites.

Follow @exisweb

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. Sidr – Left and Right Slideout

Desktop Layout Menu Example

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 1/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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

2. Responsive Nav – Slidedown Menu

Desktop Layout Menu

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 2/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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

Example slide in menu.

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

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 3/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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

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.

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 4/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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.

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 5/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

Tablet layout

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

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 6/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

Default desktop layout.

Mobile menu after the nav icon is clicked.

This is a tutorial. I actually used a hack-up of this for the mobile nav on CaffeineInformer.com.

I say hack because I have two different menus for mobile and desktop (yes ugly markup – but that’s another
story). I also made it work with a multi-level menu, but had lots of trouble with the CSS animations not working
so well. It looks good on the site, but the code behind it is ugly (just being honest).

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

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 7/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 8/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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.

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

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 9/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

Desktop – menu is a bit hard to see.

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

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 10/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

Default desktop layout, showing existing left sidebar nav.

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

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 11/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 12/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 13/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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 (swipe to open, slide down sub-menus). However it does
have a heavier footprint (16KB minified JS + a fair stack of CSS).

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 14/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

Demo and Download: mmenu.frebsite.nl/

17. ReSmenu

Desktop layout – multi-level layouts.

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 15/19
12/6/13 Useful List of Responsive Navigation and Menu Patterns

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/

Trying to Fit Responsive Tables Into Your Design?

Take a look at my guide and roundup of solutions for Responsive Tables.

And Also Look Here…

Responsive Navigation – Some more ideas.
Responsive Web Patterns – Navigation – A list of different approaches.
Optimizing Mobile Animation – A fairly hardcore article showing why we need to use CSS3 animations for
mobile.
Transitions for slide in menus – Some beautiful transition effects.
IOS7 Style navigation – clever off-canvas menu on codepen.
CSS Regions (cutting edge) – example, and tutorial.

I’ll try to keep this page updated as I come across interesting solutions. Last update: Nov 20 2013.

Tweet 29

exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns 16/19