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

Table of contents:

jQuery Off-canvas Mobile Menu Plugins:

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

A simple yet robust JavaScript/jQuery plugin for creating responsive, accessible, modular, flexible, mobile-friendly, 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]


jQuery & CSS3 Sliding Menu Using Navigation Drawer - Drawer

Drawer is a jQuery plugin for creating a responsive, touch-enabled and animated side menu that slides out from the edge of the screen when clicking or touching the trigger.

jQuery & CSS3 Sliding Menu Using Navigation Drawer - Drawer

[Demo] [Download]


5 Cool Sidebar Navigtation Templates For Bootstrap 4/3

This is a collection of 5 examples/templates showing how to create responsive, mobile-friendly sidebar navigation using jQuery, CSS/CSS3, and Bootstrap 4 or Bootstrap 3 framework.

5 Cool Sidebar Navigtation Templates For Bootstrap 4/3

[Demo] [Download]


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]


Flexible and Cross-Browser jQuery Multi-Level Push Menu Plugin

A flexible and cross-browser jQuery side menu plugin for creating a side navigation menu with multi-level functionality that allows endless nesting of navigation elements.

Flexible and Cross-Browser jQuery Multi-Level Push Menu Plugin

[Demo] [Download]


Vanilla JS Off-canvas Mobile Menu Libraries:

Responsive Sidebar Navigation with JavaScript and CSS3

A small JavaScript library which helps you create a mobile-friendly, fully responsive and space-saving sidebar navigation for your web projects.

Responsive Sidebar Navigation with JavaScript and CSS3

[Demo] [Download]


Responsive Multi-level Sidebar Menu With JavaScript/CSS

A responsive sidebar menu with multi-level sub-menus written in plain JavaScript and CSS.

Responsive Multi-level Sidebar Menu With JavaScript/CSS

[Demo] [Download]


Material Design Inspired Off-canvas Push Nav – Material-Menu

A pure JavaScript navigation library to create an off-canvas push menu inspired by Material Design apps.

Material Design Inspired Off-canvas Push Nav – Material-Menu

[Demo] [Download]


Pure CSS Off-canvas Mobile Menu Systems:

HTML And CSS Only Off-canvas Drawer Navigation

Just another responsive off-canvas drawer navigation built on top of CSS, CSS3 and checkbox element.

HTML And CSS Only Off-canvas Drawer Navigation

[Demo] [Download]


CSS Only Off-canvas Navigation Using CSS Pseudo-class

A pure CSS, mobile-friendly off-canvas navigation system built using plain HTML/CSS/CSS3 and :focus-within CSS pseudo-class.

CSS Only Off-canvas Navigation Using CSS Pseudo-class

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