10 Best Off-canvas Mobile Menus In JavaScript And CSS (2020 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 3 2020

Table of contents:

jQuery Off-canvas Mobile Menu Plugins:

Slick and App-Like Sliding Menu Plugin With jQuery - Mmenu

Mmenu is a super simple jQuery plugin for creating slick and app-like sliding menus for your mobile website,all with an unlimited amount of submenus.

Slick and App-Like Sliding Menu Plugin With jQuery - Mmenu

[Demo] [Download]


Mobile App-Style Toggle Menu/Sidebar Plugin For jQuery - Slidebars

Slidebars is a lite jQuery plugin that creates a responsive mobile app-style sidebar (side menu) sliding from left or right side or your web page/app when clicking the toggle link.

Mobile App-Style Toggle Menu/Sidebar Plugin For jQuery - Slidebars

[Demo] [Download]


Creating A Simple Off-canvas Slide Panel Navigation with jQuery Pushy

Pushy is a super tiny (~1kb) jQuery plugin for creating an off-canvas, multi-level slide panel navigation as you've seen in many mobile Apps.

Creating A Simple Off-canvas Slide Panel Navigation with jQuery Pushy

[Demo] [Download]


Mobile-friendly Off-canvas Nav Template For Bootstrap

A responsive, mobile-friendly, off-canvas sidebar navigation system designed for dashboard & admin panel, built with JavaScript (jQuery), CSS/CSS3, and Bootstrap framework.

Mobile-friendly Off-canvas Nav Template For Bootstrap

[Demo] [Download]


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

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

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

[Demo] [Download]


Vanilla JS Off-canvas Mobile Menu Libraries:

Responsive Sidebar Navigation with JavaScript and CSS3

Vertical Responsive Menu is a small JavaScript library which helps you create a mobile-friendly, fully responsive and space-saving sidebar navigation for your web projects. On small screens,  it will converts the sidebar navigation into an off-canvas menu with a toggle icon when the viewport’s size reaches the breakpoint specified in the CSS3 media queries (default to 992px).

Responsive Sidebar Navigation with JavaScript and CSS3

[Demo] [Download]


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]


Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript

A pure JavaScript/CSS based hamburger navigation that allows you to toggle an off-screen sidebar menu when you click on the hamburger trigger.

Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript

[Demo] [Download]


Pure CSS Off-canvas Mobile Menu Systems:

Off-canvas Push Menu In Pure HTML / CSS

A pure Html / CSS solution used to create an App style off-canvas push menu for site navigation using CSS3 :target selector.

Off-canvas Push Menu In Pure HTML / CSS

[Demo] [Download]


Pure CSS Sidebar Toggle Menu – Sidekick

Sidekick is a pure HTML / CSS based off-screen sidebar menu for your mobile site navigation. Click on the toggle menu you will see a sidebar navigation slides out from the left side of the screen while pushing the main page to the right.

Pure CSS Sidebar Toggle Menu – Sidekick

[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: