10 Best Off-canvas Mobile Menus In JavaScript And CSS (2022 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 05 2022
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:
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.
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.
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.
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.
Mobile-friendly Hamburger Menu In jQuery And CSS3
Yet another responsive, mobile-friendly hamburger menu design for modern, cross-platform web applications.
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.
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.
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.
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 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.
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