jQuery Script Blog

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

by jQueryScript,
mobile menuoff canvas menu

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 05 2022

Table of contents:

jQuery Off-canvas Mobile Menu Plugins:

Collapsible Sidebar Navigation Using Bootstrap 4

A mobile-friendly collapsible sidebar navigation system (off-canvas navigation) built on top of Bootstrap 4, jQuery, and CSS/CSS3.

Collapsible Sidebar Navigation Using Bootstrap 4

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

5 Cool Sidebar Navigtation Templates For Bootstrap 4/3

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]

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]

Mobile-friendly Hamburger Menu In jQuery And CSS3

Yet another responsive, mobile-friendly hamburger menu design for modern, cross-platform web applications.

Mobile-friendly Hamburger Menu In jQuery And CSS3

[Demo] [Download]

Vanilla JS Off-canvas Mobile Menu Libraries:

17+ Responsive Accessible Header Navbar Templates

A set of 17+ accessible, fully responsive, and mobile-friendly header navbar templates for modern web app design.

17+ Responsive Accessible Header Navbar Templates

[Demo] [Download]

Responsive Sidebar Navigation For Bootstrap 5

An extension to Bootstrap 5 that lets you create a responsive sidebar navigation (also called drawer navigation, off-canvas menu) on your next Bootstrap project.

Responsive Sidebar Navigation For Bootstrap 5

[Demo] [Download]

Off-canvas Navigation For Bootstrap 5

This project helps you generate a responsive off-canvas navigation from Bootstrap 5’s navbar component that enables the navbar panel to slide out from the side of the screen instead.

Off-canvas Navigation For Bootstrap 5

[Demo] [Download]

Pure CSS Off-canvas Mobile Menu Systems:

CSS Only Responsive Sticky Navbar

A responsive sticky navbar that coverts the nav items into a full-width off-canvas menu with a hamburger toggle button.

CSS Only Responsive Sticky Navbar

[Demo] [Download]

CSS Only Hamburger Toggle Menu

A fancy CSS/CSS3 hamburger toggle navigation that allows the user to toggle an off-canvas side menu by clicking on the hamburger toggle button in the header.

CSS Only Responsive Sticky Navbar

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