Top 30 Off-canvas Navigation jQuery Plugins Of 2018

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 30 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.

Originally Published Nov 12 2017, updated Dec 10 2018

Top 30 Off-canvas Navigation jQuery Plugins:

Off-Canvas Menus and Sidebars For Bootstrap 4

The Bootstrap4C Slidebars jQuery plugin makes use of adchsm's Slidebars plugin to create mobile-friendly off-canvas push menus and sidebars for Bootstrap 4 framework.

https://www.jqueryscript.net/menu/Off-Canvas-Menu-Bootstrap-4.html

[Demo] [Download]


Stackable Multi-level Sidebar Menu - HC-MobileNav

HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, off-canvas side navigation that supports endless nesting of submenu elements.

https://www.jqueryscript.net/menu/Multi-Level-Sidebar-Menu-HC-MobileNav.html

[Demo] [Download]


Cross-platform Responsive Navigation With jQuery - menuBreaker

menuBreaker is a responsive, cross-platform, multi-level navigation plugin for jQuery that auto collapses the regular horizontal nav into an off-canvas toggle menu on mobile devices.

https://www.jqueryscript.net/menu/Responsive-Navigation-jQuery-menuBreaker.html

[Demo] [Download]


Mobile-friendly Bootstrap Off-canvas Nav - jQuery Better Nav

A jQuery plugin for better Bootstrap navbar which replaces the default vertical mobile view with a sliding off-canvas menu when the viewport is narrower than a specific breakpoint.

https://www.jqueryscript.net/menu/Better-Bootstrap-Nav-jQuery.html

[Demo] [Download]


Responsive Multi-level Navigation For Bootstrap 4 - k-responsive-menu

k-responsive-menu is a simple, responsive, multi-level, cross-platform and mobile-friendly navigation jQuery plugin for Bootstrap 4 framework.

https://www.jqueryscript.net/menu/Responsive-Multi-Level-Navigation-Bootstrap-4.html

[Demo] [Download]


Off-canvas Push And Overlay Menus With jQuery And CSS3

This project provides 2 navigation patterns (push menu and overlay menu) to create mobile-friendly, off-canvas navigation menus using jQuery, HTML and CSS/CSS3.

https://www.jqueryscript.net/menu/Off-Canvas-Push-Overlay-Menus.html

[Demo] [Download]


Multi-level Sidebar Push Navigation With jQuery And CSS3

A jQuery & CSS based, multi-level, app-like revealing menu & sidebar navigation system especially suitable for dashboard & admin panel.

https://www.jqueryscript.net/menu/Multi-Level-Sidebar-Push-Navigation-jQuery-CSS3.html

[Demo] [Download]


Multi Purpose Navigation Sytem For Modern Web - jQuery Corenav

Corenav is an easy, responsive, multi-purpose, jQuery based navigation system for modern, cross-platform web development.

https://www.jqueryscript.net/menu/Navigation-System-jQuery-Corenav.html

[Demo] [Download]


3D Flipping Sidebar Navigation With jQuery And CSS3

A fancy 3D site navigation concept that reveals a sidebar off-canvas menu by flipping the main content just like a 3D cube. Built using HTML, CSS/CSS3 and JavaScript(jQuery).

https://www.jqueryscript.net/menu/3D-Flipping-Sidebar-Navigation.html

[Demo] [Download]


Modern Off-canvas Burger Menu With jQuery And CSS3

A modern, CSS3 animated off-canvas hamburger menu created for both mobile and desktop. Heavily based on CSS3 transitions and transforms.

https://www.jqueryscript.net/menu/Off-canvas-Burger-Menu-jQuery-CSS3.html

[Demo] [Download]


Create Custom Off-canvas Bootstrap 4 Nav - bsnav

bsnav is a jQuery & Bootstrap plugin used to override and extend the styles & behaviors of the default Bootstrap 4 navbar component.

https://www.jqueryscript.net/menu/Off-Canvas-Bootstrap-4-Nav.html

[Demo] [Download]


Minimalist Hamburger Push Navigation With jQuery And CSS - Swipe Menu

Yet another jQuery/CSS based push menu that enables a hamburger button to reveal an off-screen sidebar navigation while pushing the main content to the other side.

https://www.jqueryscript.net/menu/Hamburger-Push-Navigation-Swipe-Menu.html

[Demo] [Download]


Zoom & Push Navigation With jQuery And CSS3

A pretty cool off-canvas navigation concept that pushes and zooms out the main content to toggle the navigation menu.

https://www.jqueryscript.net/menu/Zoom-Push-Navigation-jQuery-CSS3.html

[Demo] [Download]


Responsive Dropdown Navigation Bar In jQuery - flxMenu

This is a responsive, flexible, multi-level dropdown (off-canvas) navigation menu plugin built in with jQuery.

https://www.jqueryscript.net/menu/Responsive-Dropdown-Navigation-flxMenu.html

[Demo] [Download]


Side Overlay Navigation With jQuery And CSS3

A mobile-friendly off-canvas hamburger navigation that slides from the left of the webpage and covers a specific part of the main content.

https://www.jqueryscript.net/menu/Side-Overlay-Navigation-jQuery-CSS3.html

[Demo] [Download]


Sticky Mobile-friendly Navigation Menu With jQuery

This is a sticky responsive nav menu built using jQuery and CSS3 that automatically converts the regular dropdown nav into a mobile-friendly off-canvas menu.

https://www.jqueryscript.net/menu/Sticky-Mobile-Menu-jQuery.html

[Demo] [Download]


Bootstrap 4 Compatible Multi Purpose Menu - jQuery sina-nav

sina-nav is a multi-purpose menu plugin that helps you create responsive, user-friendly, multi-level, Bootstrap 4 compatible navigation system for your web application.

https://www.jqueryscript.net/menu/Bootstrap-4-Multi-Purpose-Menu-Sina.html

[Demo] [Download]


Mobile-first Mega Menu Plugin With jQuery - hs Mega Menu

The hs Mega Menu jQuery plugin lets you create a responsive, sticky, mobile-first, SEO-friendly mega menu for the content-heavy web app.

https://www.jqueryscript.net/menu/mobile-first-hs-mega-menu.html

[Demo] [Download]


Off-canvas Nav With Unlimited Dropdowns - jSide Menu

jSide Menu is a responsive, skinnable, cross-platform, mobile-friendly off-canvas navigation system built with HTML5, CSS3, and JavaScript (jQuery).

https://www.jqueryscript.net/menu/off-canvas-nav-dropdowns-jside.html

[Demo] [Download]


Animated Off-canvas Navigation For Bootstrap 4

A jQuery/CSS extension that converts the regular Bootstrap navbar into an off-canvas sidebar push navigation with an animated toggle button.

https://www.jqueryscript.net/menu/Animated-Off-Canvas-Navigation-Bootstrap-4.html

[Demo] [Download]


Multifunctional Responsive Dropdown Menu - jQuery Developer Nav

Developer Nav is a jQuery based cross-platform, cross-browser, multi-level dropdown/off-canvas navigation system for content-heavy websites or web applications.

https://www.jqueryscript.net/menu/Responsive-Dropdown-Menu-Developer-Nav.html

[Demo] [Download]


Mobile-first Offcavas Navigation With jQuery

A jQuery based mobile app navigation pattern that displays a sticky bottom navigation at the bottom of the web app and shows/hides an off-canvas sidebar navigation when toggled.

https://www.jqueryscript.net/menu/Mobile-Offcavas-Navigation-jQuery.html

[Demo] [Download]


Cross-platform Pull And Slide Navigation - jQuery flat-menu

The flat-menu jQuery plugin helps you create a responsive, adaptive, touch-friendly, multi-level pull & slide navigation for dashboard, admin panel & cross-platform web app.

https://www.jqueryscript.net/menu/Pull-Slide-Navigation-Flat-Menu.html

[Demo] [Download]


Sliding Hamburger Navigation With jQuery - Slide Menu

Slide Menu is a variant of the Swipe Menu plugin that reveals the off-canvas navigation overlaying the main content instead of pushing it to the right.

https://www.jqueryscript.net/menu/Sliding-Hamburger-Navigation.html

[Demo] [Download]


Cross-platform Off-canvas Mega Menu In jQuery - AM-Menu

The jQuery AM-Menu (App Style Mega Menu) plugin helps you create a fully responsive, CSS3 animated, off-canvas mega menu for your cross-platform web applications.

https://www.jqueryscript.net/menu/Off-Canvas-Mega-Menu-AM.html

[Demo] [Download]


localStorage Enabled jQuery Push Menu Plugin - Toggle.js

A mobile-friendly off-canvas push menu (sidebar navigation) that uses HTML5 local storage to preserve the menu open/close stats on your next visit.

https://www.jqueryscript.net/menu/localStorage-Push-Menu-Plugin-jQuery-Toggle.html

[Demo] [Download]


Material Design Sidenav Plugin With jQuery And CSS3 - side-penal

Yet another jQuery plugin which helps front-end developers to quickly create responsive, mobile-compatible, SEO-friendly off-canvas panel (aka. drawer, sidenav) inspired by Material Design.

https://www.jqueryscript.net/menu/material-sidenav-penal.html

[Demo] [Download]


Lightweight Flexible Offcanvas Navigation - jQuery pushmenu.js

The jQuery pushmenu.js plugin helps developers to generate a multi-level, mobile-friendly offcanvas navigation from nested HTML lists.

https://www.jqueryscript.net/menu/offcanvas-navigation-pushmenu.html

[Demo] [Download]


Multi-level Sliding Hamburger Navigation - jQuery ggContentMenu

ggContentMenu is a jQuery plugin for creating mobile-compatible, SEO-friendly, multi-level off-canvas navigation with slide & fade animations.

https://www.jqueryscript.net/menu/Hamburger-Navigation-ggContentMenu.html

[Demo] [Download]


Semantic Responsive Mobile Navigation - jQuery rsmm

A responsive, adaptive, SEO-friendly, drop-down navigation plugin that collapses the horizontal menu items to an off-canvas side menu when a specified breakpoint is reached.

https://www.jqueryscript.net/menu/semantic-responsive-mobile-navigation-rsmm.html

[Demo] [Download]


See also: