10 Best Off-canvas Mobile Menus In JavaScript And CSS (2021 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 29 2021
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:
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.
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.
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).
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.
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.
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.
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.
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.
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.
Sidebar-Menu
A hamburger sidebar navigation (also called off-canvas menu & push menu) built using checkbox input, CSS/CSS3, and Font Awesome icons.
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