10 Best Off-canvas Mobile Menus In JavaScript And CSS (2021 Update)

by jQueryScript,

What is Off-canvas Mobile Menu

Off-canvas Mobile Menu is a cross-platform navigation design concept for modern web & mobile design. It is now widely used on web and mobile applications.

The off-canvas navigation system enables the visitor to show/hide your site navigation in an elegant way, as you see on most mobile App.

The Best Off-canvas Mobile Menu

In this blog post you will find the 10 best Off-canvas Mobile Navigation Systems implemented in jQuery, Vanilla JavaScript and Pure CSS/CSS3. Have fun.

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

Originally Published Nov 12 2017, updated Jan 29 2021

Table of contents:

jQuery Off-canvas Mobile Menu Plugins:

Stackable Multi-level Sidebar Menu - hc-offcanvas-nav

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

Stackable Multi-level Sidebar Menu - hc-offcanvas-nav

[Demo] [Download]


Fixed Bootstrap 4 Vertical Sidebar Navigation

This is a Bootstrap vertical nav script that helps you build a fixed sidebar navigation using Bootstrap 4 navigation and media objects.

Fixed Bootstrap 4 Vertical Sidebar Navigation

[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).

Off-canvas Nav With Unlimited Dropdowns - jSide Menu

[Demo] [Download]


Mobile-first Multi-level Side Navigation - jQuery zeynepjs

The jQuery zeynepjs plugin lets you create a multi-level off-canvas push menu from nested HTML lists for your mobile-first web app.

Mobile-first Multi-level Side Navigation - jQuery zeynepjs

[Demo] [Download]


Android-style Offcanvas Sidebar Navigation with jQuery and CSS3

Yet another off-canvas menu system that helps you create a toggleable sidebar navigation that behaves like a native side navigation as you seen on Android apps.

Android-style Offcanvas Sidebar Navigation with jQuery and CSS3

[Demo] [Download]


Vanilla JS Off-canvas Mobile Menu Libraries:

Mobile-friendly Swipe Menu In Vanilla JavaScript – Touch side swipe

A Vanilla JavaScript plugin used to create a mobile-friendly off-canvas side menu that supports touch swipe events.

Mobile-friendly Swipe Menu In Vanilla JavaScript – Touch side swipe

[Demo] [Download]


Animated Sidebar Navigation with JavaScript and CSS

A JavaScript & CSS based sidebar interaction concept for easily creating an off-canvas sidebar navigation that you can hide/show based on user actions.

Animated Sidebar Navigation with JavaScript and CSS

Demo Download


Slide Menu

This is the vanilla JavaScript version of the jQuery slide menu plugin that helps web developers implement a smoothly sliding, multi-level, off-canvas navigation in vanilla JavaScript.

Slide Menu

Demo Download


Pure CSS Off-canvas Mobile Menu Systems:

CSS Only Responsive Fixed Sidebar Navigation

A CSS only responsive fixed sidebar navigation that collapses into a bottom nav bar on mobile devices.

CSS Only Responsive Fixed Sidebar Navigation

Demo Download


Sidebar-Menu

A hamburger sidebar navigation (also called off-canvas menu & push menu) built using checkbox input, CSS/CSS3, and Font Awesome icons.

Sidebar-Menu

Demo Download


More Resources:

Want more jQuery plugins or JavaScript libraries to create awesome Off-canvas Mobile Menus on the web & mobile? Check out the jQuery Off-canvas Menu and JavaScript/CSS Off-canvas Mobile Menu sections.

See also: