Trends

Responsive Navigation Solutions and Resources

We take a quick look at some of the best navigation solutions and also share some useful resources.

As responsive web design quickly evolves, more and more usable solutions and patterns are emerging to help you easily build a navigation system for your site that will work seamlessly on both mobile devices and desktops.

In this post I’m going to take a quick look at some of those solutions and also share some useful resources to help get you on your way.

The most popular menu design trends are:

  • Hambuger Icon Menu, which is a very popular option for both small and complex sites.
  • Off-Canvas menu, where you hide your menu “off canvas” and reveal it when the menu button is clicked.
  • Toggle Menu, which will transform your standard menu into an accordion on smaller screens.
  • Overlay-Style Menus, which will either partially or fully cover the entire screen on both mobiles and desktops when clicked.

There are other less popular options, but these are the most common and deemed to be the best solutions. And it is these solutions that I’m going to take a look at today.

Responsive Navigation Plugins

Universal Responsive Mega Menu

The flexible Universal Responsive Mega Menu jQuery plugin offers up to twelve varied sizes of drop-downs and unlimited fly-out elements. Customization requires only some basic knowledge of CSS and the script includes a few options so that you can easily select which animation effect should be applied to the menu. Also, by changing just a single class you can use this system as a sticky footer as well.

Universal Responsive Mega Menu

jQuery.mmenu

If you’re looking for an app-like or off-canvas menu then you should take a look at the jQuery.mmenu plugin. It is very easy to customize and offers a wide range of options, extensions and add-ons that will allow you to change the opening and closing effects, change the color schemes, and also change the size and position of the menu.

jQuery.mmenu

Ultimate Burger Menu

By far and away the Ultimate Burger Menu is the easiest to use jQuery plugin on this page. It’s a very small and lightweight JavaScript file that will allow you to add a ‘burger’ menu (or three-lined menu) to your website in minutes. It does also offer a huge array of options should you wish to extend it’s functionality.

Jet Megamenu

Jet Megamenu

Built on a grid system, the responsive and feature-rich Jet Megamenu can be optionally used as either a basic drop-down menu, or as a mega-menu. It comes packaged with 14 preset styles (it’s also very easy to create your own) and has been tested on all major browser, including touch-screen devices.

Demo

Jet Megamenu

Alpha

Optimized for mobile and touch devices, the Alpha jQuery plugin is a simple responsive menu system that has been styled in the very popular flat design style. On mobile devices, the fluid horizontal menu turns into a vertical menu which, just like the submenus, can be toggled with a single tap or click.

Alpha

Fly Side Menu

The Fly Side Menu plugin is a unique responsive menu solution that recreates the impressive full-screen animation from Airbnb’s latest iOS app. It has been tested on both desktop and mobile versions of Chrome, Firefox and Safari, although, this plugin is more of a proof-of-concept than a production-ready responsive menu system, so please use with caution. Still, it does look amazing!

Fly Side Menu

Square Menu

The Square Menu plugin, as you will be able to tell from the name, has been based on the animated menu from the new Square website. It also comes bundled with additional animation effects and a few options for adding extra functionality.

Square Menu

FlexMenu

Built with Sass, FlexMenu is a fully responsive jQuery navigation plugin that gives you the option to choose between either an off-canvas menu or a toggle/drop-down-style menu when viewed on a smaller screen.

FlexMenu

slimMenu

slimMenu is a lightweight jQuery plugin that has been built to create responsive and multi-level navigation menus on the fly. You’ll not have to struggle with media queries to create your responsive menus, as slimMenu will do the job for you and it’s only 5KB (2.5KB minified)!

slimMenu

bigSlide

bigSlide is a tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel menus. It will slide the navigation panel as well as any containers given the .push class (or a class of your choosing in the settings).

bigSlide

CMD Bomsect

The fully-responsive CMD Bomsect plugin will quickly add a full-screen and animated overlay menu to your website that looks fantastic on smaller devices. It does come packaged with twelve optional full-screen animations and five additional backgrounds colors.

CMD Bomsect

Responsive Navigation Resources

Steven Bradley has published a four part series on Tuts+ that explored a number of responsive navigation patterns. The four tutorials looked into how to develop navigation systems yourself, and explores everything from top nav bars, through select dropdowns and footer patterns, to off-canvas navigations.

Brad Frost has also conducted extensive studies into both basic responsive navigation patterns and also complex navigation patterns. Both studies are well worth bookmarking and referencing.

The essential resource ResponsiveNavigation.net offers many tips and some fantastic demos that show you how to structure your menu to help you build a better mobile navigation system. The site also offers a few helpful insights you should consider before planning and building your site’s menu.

Responsive Menu Tutorials

There are a multitude of responsive and mobile navigation learning resources available, to help narrow your search here are some of my favorites:


Paul Andrew

About the Author Paul Andrew

Paul is the founder of Speckyboy Design Magazine and writes web stuff for Envato. You can follow him on Twitter.