10 Best Off-canvas Mobile Menus In JavaScript And CSS (2023 Update)
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
- Vanilla Off-canvas Mobile Menu Libraries
- Pure CSS Off-canvas Mobile Menu Systems
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.
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.
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.
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.
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.
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 Multi-level Sidebar Menu With JavaScript/CSS
A responsive sidebar menu with multi-level sub-menus written in plain JavaScript and CSS.
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.
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.
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.
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:
- Best Responsive Menu jQuery Plugins
- Best Responsive Dropdown Menus
- Best Accordion Menu Components
- Best Circle Menu Plugins
- Best Mega Menu Systems
- Best Floating Action Button (Popup Menu) Plugins
- Best Fullscreen Navigation Plugins
- Best Floating Action Button (Popup Menu) Plugins
- Best JavaScript & CSS Responsive Menus
- Best Mobile-friendly Off-canvas Navigation Systems
- Best Vue.js Menu Components To Improve App Navigation Experience
