15 Responsive Navigation jQuery Plugins

For the most of us, the most difficult aspect of building a responsive layout is the planning and coding of its navigation. As there is no truly tried and tested universal solution, the style of the menu you use will depend on the type of site you are building.

If it is a small site, a <select> drop-down menu or a basic “three line” toggle menu will probably be suffice. But if it is a larger site (an ecommerce store for example) that relies upon a mega-menu for navigation on its desktop version, then a drawer-style navigation or an animated side panel menu will most likely help you.

So, no matter what type of site you are building, in this post we will hopefully have the solution for you in the form of these jQuery plugins.


Sidr - jQuery Responsive Navigation Plugin

Sidr is an easy to use plugin that will create a responsive Facebook-a-like side menu. It allows you to create multiple sidrs menus on either side of your layout.
(We use Sidr on Speckyboy).

Sidr →GitHub →


Navgoco - jQuery Responsive Navigation Plugin

Navgoco is a simple plugin that can turn a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded submenus between sessions by using cookies and optionally act as an accordion menu.

Navgoco →GitHub →


FlexNav - jQuery Responsive Navigation Plugin

FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down menu. From the developer: It is a ‘device agnostic approach to complex site navigation with support for touch and keyboard accessibility’.

FlexNav →GitHub →


SmartMenus - jQuery Responsive Navigation Plugin

The SmartMenus is a feature-rich plugin that will create a horizontal or vertical responsive and accessible list-based menu that works on all devices.

SmartMenu →GitHub →

jQuery Menu Aim

jQuery Menu Aim - jQuery Responsive Navigation Plugin

Menu-Aim is a plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu's contents.
This problem is normally solved using timeouts and delays. menu-aim tries to solve this by detecting the direction of the user's mouse movement. This can make for quicker transitions when navigating up and down the menu.

jQuery Menu Aim →

Side Toggle Menu

Side Toggle Menu - jQuery Responsive Navigation Plugin

Side Toggle Menu allows you to add a side bar menu to your layout that slides in from the left or right edge of the browser window. It can work by either moving the page over and making room for itself, or by overlaying the page.

Side Toggle Menu →

jQuery slimMenu

jQuery slimMenu - jQuery Responsive Navigation Plugin

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

jQuery slimMenu →GitHub →


jPanelMenu - jQuery Responsive Navigation Plugin

jPanelMenu is a jQuery plugin that creates an animated paneled-style menu (like the type seen in the mobile versions of Facebook and Google). Animation is handled by CSS transitions for browsers that support it and are hardware-accelerated on supporting devices, so the animations are silky smooth.

jPanelMenu →GitHub →


Flaunt.js - jQuery Responsive Navigation Plugin

Flaunt.js is a plugin that allows you to create a responsive, nested navigation out of the box.

Flaunt.js →


Naver - jQuery Responsive Navigation Plugin

Naver is a simple plugin that will atuomatically turn a basic navigation system into a mobile friendly system.

Naver →GitHub →


TinyNav.js - jQuery Responsive Navigation Plugin

TinyNav.js is a lightweight plugin (362 bytes) that converts <ul> and <ol> menus into a select dropdown. It also automatically selects the current page and adds selected="selected" for that item.

TinyNav.js →GitHub →


Responsive-Menu is tiny plugin that will turn your site's navigation into a dropdown (<select>) when your browser is at mobile widths.

Responsive-Menu →


HorizontalNav - jQuery Responsive Navigation Plugin

The HorizontalNav plugin will span a horizontal navigation to fit the full width of it's container and comes with an option to either make it responsive or not.

HorizontalNav →GitHub →


jQuery.mmenu - jQuery Responsive Navigation Plugin

jQuery.mmenu is a plugin for creating slick, app look-alike sliding menus for you mobile website with only one line of Javascript:

[js]$ (“#nav”).mmenu();[/js]

jQuery.mmenu →


MeanMenu - jQuery Responsive Navigation Plugin

MeanMenu is a media query independent plugin for converting a standard menu into a mobile responsive menu. It is not a menu system replacement, but simply some lightweight JS to convert a standard menu into a mobile version.

MeanMenu →GitHub →

You might also like…

Speckyboy Design Magazine

Leave a Comment