Top 50 Best Off-canvas Navigation jQuery Plugins Of 2017 (So Far)

by jQueryScript,

The off-canvas menu is a cross-platform navigation design concept for modern web design. An off-canvas navigation provides a simple and space-saving way to reveal a hidden sidebar menu when toggled. In this blog post you will find the top 50 best Off-canvas navigation jQuery plugins for both desktop and mobile web design. I hope you like it.

Not a jQuery user? View Top 10 Pure JavaScript & CSS Off-canvas Menus.

Top 50 Off-canvas Navigation jQuery Plugins:

Left-to-right Push Menu With jQuery And CSS3

Yet another mobile-friendly navigation system that allows your users to toggle a vertical off-screen navigation menu while push the main content from left to right.

https://www.jqueryscript.net/menu/Left-to-right-Push-Menu-With-jQuery-CSS3.html

[Demo] [Download]

Smooth Sidebar Navigation with jQuery and CSS3

A jQuery based sidebar navigation helps you create an off-canvas sidebar navigation menu with smooth transitions based on CSS3 animations.

https://www.jqueryscript.net/menu/Smooth-Sidebar-Navigation-with-jQuery-CSS3.html

[Demo] [Download]

Touch-enabled Burger Push Menu Plugin With jQuery - SwipeNav

SwipeNav is a mobile-friendly jQuery site navigation plugin which reveals an off-screen push menu with touch swipe events or by clicking on the hamburger toggle button.

https://www.jqueryscript.net/menu/Touch-enabled-Burger-Push-Menu-Plugin-With-jQuery-SwipeNav.html

[Demo] [Download]

Off-canvas Push Menu jQuery Plugin For Bootstrap

A lightweight jQuery plugin that convert the default Bootstrap nav bar component into an off-canvas style push menu in mobile view.

https://www.jqueryscript.net/menu/Off-canvas-Push-Menu-jQuery-Plugin-For-Bootstrap.html

[Demo] [Download]

Minimalist Navigation Drawer Plugin With jQuery - Push Menu

Push Menu is a jQuery plugin used to create an Android style navigation drawer (also known as off-canvas menu) that slides in from the left side of the webpage.

https://www.jqueryscript.net/menu/Minimalist-Navigation-Drawer-Plugin-With-jQuery-Push-Menu.html

[Demo] [Download]

Mobile First Swipe Navigation With jQuery and Hammer.JS

A jQuery / CSS3 / Hammer.js based, Android style navigation which allows the user to reveal / hide an off-canvas sidebar menu via touch swipe and mouse drag events.

https://www.jqueryscript.net/menu/Mobile-First-Swipe-Navigation-With-jQuery-Hammer-JS.html

[Demo] [Download]

Bootstrap Sidebar Extension With jQuery And CSS / CSS3

A jQuery & CSS extension that creates a CSS3 animated, toggleable off-canvas sidebar for your Bootstrap based webpages.

https://www.jqueryscript.net/menu/Bootstrap-Sidebar-Extension-With-jQuery-CSS-CSS3.html

[Demo] [Download]

Bootstrap Drawer Panel/Navigation Plugin With jQuery

Bootstrap Drawer is a JQuery plugin which adds mobile-friendly, app-style, off-canvas drawer panels/navigation to your Bootstrap project.

https://www.jqueryscript.net/menu/Bootstrap-Drawer-Panel-Navigation-Plugin-With-jQuery.html

[Demo] [Download]

Modern Off-canvas Accordion Navigation With jQuery - sidenav

A simple and tiny jQuery plugin that helps you create a modern, mobile-friendly, off-canvas, sidebar accordion menu for your cross-platform webpages.

https://www.jqueryscript.net/menu/Modern-Off-canvas-Accordion-Navigation-With-jQuery-sidenav.html

[Demo] [Download]

Minimal Overlaying Off-canvas Plugin With jQuery - Iptools Offcanvas

Iptools Offcanvas is a really simple jQuery plugin that uses CSS3 transitions and transforms to create an overlaying, multi-purpose off-canvas panel.

https://www.jqueryscript.net/menu/Minimal-Overlaying-Off-canvas-Plugin-With-jQuery-Iptools-Offcanvas.html

[Demo] [Download]

Minimalist Sidebar Navigation With jQuery And CSS3

A simplest sidebar navigation that uses jQuery and CSS3 transitions to slide out an off-canvas menu overlaying the main content.

https://www.jqueryscript.net/menu/Minimalist-Sidebar-Navigation-With-jQuery-CSS3.html

[Demo] [Download]

Pretty Simple Responsive Dropdown Navigation With jQuery And CSS3

A jQuery & CSS3 based multi-level dropdown menu that automatically transforms the regular header navigation into an off-canvas hamburger menu on small screen devices.

https://www.jqueryscript.net/menu/Super-Simple-Responsive-Dropdown-Navigation-jQuery-CSS3.html

[Demo] [Download]

Responsive Off-canvas Sidebar Navigation With jQuery And CSS3

A jQuery/CSS3 based responsive, off-canvas navigation where the sidebar menu is displayed by sliding the entire page to the left (or right) side when toggled.

https://www.jqueryscript.net/menu/Responsive-Off-canvas-Sidebar-Navigation-With-jQuery-CSS3.html

[Demo] [Download]

Stylish Off-canvas Sidebar Plugin With jQuery - Sidebar.js

Sidebar.js is a lightweight and easy-to-use jQuery plugin that lets you create an off-screen, toggleable off-canvas sidebar for site navigation or control panels.

https://www.jqueryscript.net/menu/Stylish-Off-canvas-Sidebar-Plugin-With-jQuery-Sidebar-js.html

[Demo] [Download]

Responsive Overflow Off-canvas Navigation Plugin With jQuery - okayNav

A mobile-friendly jQuery navigation plugin that automatically hides overflowing items and shows them in a off-canvas sidebar navigation on small screens.

https://www.jqueryscript.net/menu/Responsive-Overflow-Off-canvas-Navigation-Plugin-With-jQuery-okayNav.html

[Demo] [Download]

Off-canvas Push Menu Plugin For Bootstrap - Push.js

Push.js is a lightweight jQuery plugin which adds left or right off-canvas sidebar push menus to your Bootstrap projects.

https://www.jqueryscript.net/menu/Off-canvas-Push-Menu-Plugin-For-Bootstrap-Push-js.html

[Demo] [Download]

jQuery Off-canvas Menu Plugin For Bootstrap 4 - mdstrap

mdstrap is a tiny jQuery plugin that makes your Bootstrap 4 navbar act as an off-canvas side menu on mobile devices.

https://www.jqueryscript.net/menu/jQuery-Off-canvas-Menu-Plugin-For-Bootstrap-4-mdstrap.html

[Demo] [Download]

Responsive Multilevel Dropdown Menu Plugin With jQuery

RWD Multilevel Menu makes use of jQuery and CSS3 to converts the normal horizontal dropdown menu into a sliding side menu on mobile devices.

https://www.jqueryscript.net/menu/Responsive-Multilevel-Dropdown-Menu-Plugin-With-jQuery.html

[Demo] [Download]

Minimalist Sidebar Offcanvas Menu Plugin With jQuery - asidebar

asidebar is a super tiny jQuery plugin used to create an off-canvas sidebar navigation / menu / panel for your web application.

https://www.jqueryscript.net/menu/Minimalist-Sidebar-Offcanvas-Menu-Plugin-With-jQuery-asidebar.html

[Demo] [Download]

Versatile jQuery Offcanvas Menu Plugin With jQuery - Hiraku

Hiraku is a lightweight yet powerful jQuery plugin used to create off-canvas drawer navigation menu that supports both left and right sides.

https://www.jqueryscript.net/menu/Versatile-jQuery-Offcanvas-Menu-Plugin-With-jQuery-Hiraku.html

[Demo] [Download]

Minimal Sliding Mobile Menu With jQuery And CSS3

Just another jQuery & CSS implementation of the mobile-friendly sliding off-canvas navigation menu that uses CSS3 animations for the smooth slide in effect.

https://www.jqueryscript.net/menu/Minimal-Sliding-Mobile-Menu-With-jQuery-CSS3.html

[Demo] [Download]

Mobile-first 0ffcavas Side Menu With jQuery - gab-mobilemenu

gab-mobilemenu is a jQuery plugin used to create an offcanvas sidebar navigation for mobile and small screen devices (screen size < 1024px).

https://www.jqueryscript.net/menu/Mobile-first-0ffcavas-Side-Menu-jQuery-gab-mobilemenu.html

[Demo] [Download]

Multi-level Mobile Navigation With jQuery And CSS3

This is a jQuery & CSS3 based off-canvas mobile navigation where the user has the ability to access sub menu items just like a drill down menu.

https://www.jqueryscript.net/menu/Multi-level-Mobile-Navigation-With-jQuery-CSS3.html

[Demo] [Download]

jQuery Plugin For Off-canvas Bootstrap Navigation

An ultra-light jQuery extension for Bootstrap that helps you create an user-friendly off-canvas push menu from the default Bootstrap navbar component in mobile view.

https://www.jqueryscript.net/menu/jQuery-Plugin-For-Off-canvas-Bootstrap-Navigation.html

[Demo] [Download]

Convenient Retractable Navigation With jQuery And CSS3 - gnmenu.js

gnmenu.js is a jQuery plugin used to create a convenient slide-out sidebar navigation for both desktop and mobile webpages. Inspired by the Google Nexus website.

https://www.jqueryscript.net/menu/Convenient-Retractable-Navigation-With-jQuery-CSS3-gnmenu-js.html

[Demo] [Download]

jQuery Plugin To Create Bootstrap Off-canvas Navigation

Just another jQuery extension of Bootstrap that automatically converts the native Bootstrap header navbar into an off-canvas navigation menu in mobile view.

https://www.jqueryscript.net/menu/jQuery-Plugin-To-Create-Bootstrap-Off-canvas-Navigation.html

[Demo] [Download]

Responsive Off-canvas Sidebar Plugin For Bootstrap - sidebar.js

Just another jQuery plugin used to create a responsive off-canvas sidebar/navigation for your Bootstrap project.

https://www.jqueryscript.net/menu/Responsive-Off-canvas-Sidebar-Plugin-For-Bootstrap-sidebar-js.html

[Demo] [Download]

Responsive Sliding Hamburger Menu Plugin For jQuery - elmenu

Just another jQuery based responsive nav solution that converts the normal navigation into a mobile-friendly sliding hamburger menu (aka off-canvas menu) on small screens.

https://www.jqueryscript.net/menu/Responsive-Sliding-Hamburger-Menu-Plugin-For-jQuery-elmenu.html

[Demo] [Download]

jQuery Plugin To Create Bootstrap Push Navigation - bs.push.nav

bs.push.nav is a jQuery extension that converts the default responsive Bootstrap navigation into an off-canvas push menu in mobile view.

https://www.jqueryscript.net/menu/jQuery-Plugin-To-Create-Bootstrap-Push-Navigation-bs-push-nav.html

[Demo] [Download]

Mobile-first Fullscreen Navigation Plugin With jQuery - Snavvy

Snavvy is a lightweight jQuery plugin for creating a mobile-friendly navigation that slides out a fullscreen, off-canvas menu covering the whole page when toggled.

https://www.jqueryscript.net/menu/Mobile-first-Fullscreen-Navigation-Plugin-With-jQuery-Snavvy.html

[Demo] [Download]

Flexible Accessible Off-canvas Panel Plugin For jQuery - js-offcanvas

A jQuery off-canvas navigation plugin which lets you create fully accessible sidebar or top/bottom sliding panels with keyboard interactions and ARIA attributes.

https://www.jqueryscript.net/menu/Flexible-Accessible-Off-canvas-Panel-Plugin-For-jQuery-js-offcanvas.html

[Demo] [Download]

Android Style Off-canvas Navigation For Bootstrap - offcanvas.js

offcanvas.js is a lightweight jQuery plugin that extends the default Bootstrap navigation to create an Android style sliding off-canvas menu on small screens.

https://www.jqueryscript.net/menu/Android-Style-Off-canvas-Navigation-For-Bootstrap-offcanvas-js.html

[Demo] [Download]

Simple Multi-level Off-canvas Menu Plugin With jQuery - Essence Drawermenu

Essence Drawermenu is a tiny jQuery plugin used to create an multiple-level, drawer-style off-canvas navigation menu for your responsive, cross-platform website.

https://www.jqueryscript.net/menu/Simple-Multi-level-Off-canvas-Menu-Plugin-jQuery-Essence-Drawermenu.html

[Demo] [Download]

3D Off-canvas Skew Menu with jQuery and CSS3

A cool 3D navigation that uses jQuery and several CSS3 properties to reveal a horizontal off-canvas menu while 'skewing' the main content section.

https://www.jqueryscript.net/menu/3D-Off-canvas-Skew-Menu-with-jQuery-CSS3.html

[Demo] [Download]

Responsive Multi-purpose Navigation Plugin With jQuery - Pushy

Pushy is a mobile-friendly jQuery navigation plugin which lets you create responsive push and/or overlay sidebar menus using CSS transforms and transitions.

https://www.jqueryscript.net/menu/Responsive-Multi-purpose-Navigation-Plugin-jQuery-Pushy.html

[Demo] [Download]

Interactive Off-canvas Overlay Menu With jQuery And CSS3

An interactive, mobile-friendly site navigation that allows to show/hide an off-canvas sidebar overlay menu / panel based on user actions.

https://www.jqueryscript.net/menu/Interactive-Off-canvas-Overlay-Menu-With-jQuery-CSS3.html

[Demo] [Download]

Powerful Side Navigation Menu Plugin With jQuery - simpler-sidebar

Yet another jQuery sidebar navigation plugin which lets you create an animated, app-style, fully configurable off-canvas side menu for the desktop or mobile web pages.

https://www.jqueryscript.net/menu/Powerful-Side-Navigation-Menu-Plugin-With-jQuery-simpler-sidebar.html

[Demo] [Download]

Lightweight Responsive Site Navigation System With jQuery

A lightweight, responsive menu system which turns a nested unordered list of menu links into a vertical off-canvas sliding menu on mobile view (screen size < 800px).

https://www.jqueryscript.net/menu/Lightweight-Responsive-Site-Navigation-System-With-jQuery.html

[Demo] [Download]

Responsive Mobile Navigation Plugin With jQuery - Adaptive Menu

Adaptive Menu is a lightweight jQuery plugin used to create a responsive menu that will auto switches to an off-canvas side navigation on small screens.

https://www.jqueryscript.net/tooltip/Responsive-Mobile-Navigation-Plugin-With-jQuery-Adaptive-Menu.html

[Demo] [Download]

Dynamic Off-canvas Push Menu For Bootstrap - jQuery menuUI

menuUI is a jQuery plugin for generating a side off-canvas push navigation for your Bootstrap webpage using JSON objects.

https://www.jqueryscript.net/menu/Off-Canvas-Push-Menu-Bootstrap-jQuery-menuUI.html

[Demo] [Download]

Lightweight Side Toggle Plugin With jQuery - sideToggle

sideToggle is a super tiny jQuery Plugin that allows to toggle any element 'Left To Right' or 'Right To Left' with a smooth animation based on the Velocity.js JavaScript.

https://www.jqueryscript.net/menu/Lightweight-Side-Toggle-Plugin-jQuery-sideToggle.html

[Demo] [Download]

Minimalist Responsive Dropdown Menu Plugin With jQuery - mainNavigation

mainNavigation is a simple, lightweight jQuery plugin for generating a multi-level dropdown menu that automatically collapses into an off-canvas menu in mobile view.

https://www.jqueryscript.net/menu/Minimalist-Responsive-Dropdown-Menu-Plugin-With-jQuery-mainNavigation.html

[Demo] [Download]

jQuery Plugin To Create App-style Revealing Sidebars - Sidebar.js

A jQuery plugin that lets you create mobile app-style revealing sidebars (also known as off-canvas sidebar) for site navigation, drawer panels and any other side content.

https://www.jqueryscript.net/menu/jQuery-Plugin-To-Create-App-style-Revealing-Sidebars-Sidebar-js.html

[Demo] [Download]

Mobile-first Off-screen Navigation With jQuery - 4PXMMenu

4PXMMenu is a jQuery plugin to create an off-canvas hamburger toggle menu on mobile devices, utilizing CSS3 transition, transforms and jQuery toggleClass() method.

https://www.jqueryscript.net/menu/Mobile-first-Off-screen-Navigation-With-jQuery-4PXMMenu.html

[Demo] [Download]

Multi-level Sliding Side Menu Plugin For jQuery

A small jQuery side menu plugin used to create smoothly sliding, multi-level, off-canvas navigation for your web applications.

https://www.jqueryscript.net/menu/Multi-level-Side-Menu-Plugin-jQuery.html

[Demo] [Download]

Stacked Card Style Navigation Menu with jQuery and CSS3

An awesome off-canvas navigation concept built with jQuery and CSS3 that allows you to switch between sectioned pages like stacked cards.

https://www.jqueryscript.net/menu/Stacked-Card-Style-Navigation-Menu-with-jQuery-CSS3.html

[Demo] [Download]

Sliding Drawer Menu Plugin With jQuery - mln_menu.js

The mln_menu.js jQuery plugin helps you create a sliding drawer which can be used for revealing an off-canvas sidebar navigation on your cross-platform webpage.

https://www.jqueryscript.net/menu/Sliding-Drawer-Menu-Plugin-jQuery.html

[Demo] [Download]

Minimalist Sidebar Navigation With jQuery And Font Awesome

This is a super small responsive sidebar navigation (aka off-canvas menu) built with HTML, CSS/CSS3, jQuery and Font Awesome.

https://www.jqueryscript.net/menu/Sidebar-Navigation-jQuery-FontAwesome.html

[Demo] [Download]

Tiny Bootstrap Off-canvas Navigation Plugin With jQuery

This is a lightweight jQuery plugin that transforms the regular Bootstrap nav component into a mobile-friendly, off-canvas push menu on small screen devices (smaller than 767px).

https://www.jqueryscript.net/menu/Bootstrap-Off-canvas-Navigation-Plugin.html

[Demo] [Download]

jQuery Plugin To Create Sliding Drawers With Blur Effects - PopupLayer

PopupLayer is a cool jQuery plugin that creates off-canvas drawers sliding out from any position of the webpage, while blurring the other web content.

https://www.jqueryscript.net/menu/jQuery-Plugin-To-Create-Sliding-Drawers-With-Blur-Effects-PopupLayer.html

[Demo] [Download]