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!
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.
2. Responsive Nav – Slidedown Menu
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.
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.
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.
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).
7. Smashing Magazine – Slideout menu
This is a tutorial.
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.
9. Top Drawer – Slidedown Menu
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.
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).
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 to drag out the menu – as long as you include the hammerjs library. Uses CSS3 transforms for the animation.
Dependent on jQuery and Modernizr.
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).
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.
14. Webdesignerwall – Mid page responsive menu
The nice piece of CSS3 magic takes a horizontal nav bar, and turns into nice dropdown on mobiles.
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.
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/
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.
19. Fixed Nav
Nice clean implementation.
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.
As well has tapping the menu icon, you can also drag in the menu (and it will snap to a certain position).
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.
Trying to Fit Data Tables Into Your Responsive Site?
And Also Look Here…
- Responsive Navigation – Some more ideas.
- Responsive Web Patterns – Navigation – A list of different approaches.
- 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.
- Off Canvas and touch enabled (uses jQuery and hammer.js).
- cssPanelMenu (CSS only slideout).
I’ll try to keep this page updated as I come across interesting solutions.