Top 10 Mobile-friendly Off-canvas Navigation Systems (2019 Update)

Here is a constantly updated list of the 10 best JavaScript and CSS based mobile app-style off-canvas navigation menus we published on CSSScript.com.

I hope you like it and don’t forget to spread the world.

Originally Published Nov 10 2017, updated Sep 15 2019

1. mmenu

mmenu

Demo Download

A super simple JavaScript & jQuery plugin for creating slick and app-like sliding menus for your mobile website, all with an unlimited amount of submenus.


2. offside

Off-canvas Push Menu with JavaScript and CSS3 Transforms – offside

Demo Download

offside is a JavaScript library that uses CSS3 transforms to slide in an off-canvas menu while pushing the main page to the other side.


3. Material Menu

material-off-canvas-push-nav

Demo Download

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


4. Canvi.js

Elegant Off-canvas Navigation In Vanilla JavaScript – Canvi.js

Demo Download

Canvi.js is a standalone vanilla JavaScript used to create elegant, configurable, push and/or overlay off-canvas navigation for your cross-platform web application.


5. mmenu light

Lightweight Mobile App Navigation System - mmenu-light

Demo Download

mmenu-light is a light version of the mmenu plugin that makes it easier to create off-canvas hamburger navigation just like the native mobile app.


6. Pusha

Lightweight Offcanvas Push Navigation In JavaScript - pusha

Demo Download

pusha is a lightweight JavaScript plugin to create an off-canvas side menu that slides out from the left/right/top/bottom of the screen while pushing the page content to the other side.


7. Touch side swipe

Mobile-friendly Swipe Menu In Vanilla JavaScript – Touch side swipe

Demo Download

A Vanilla JavaScript plugin used to create a mobile-friendly off-canvas side menu that supports touch swipe events.


8. CSS Only Hamburger Toggle Menu

CSS Only Hamburger Toggle Menu

Demo Download

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.


9. mkgSideBar

Simple Flexible Off-canvas Side Navigation With Pure JavaScript – mkgSideBar

Demo Download

mkgSideBar is a native JavaScript library that helps you create dynamic, flexible, mobile-friendly, smooth off-screen sidebar navigation/panels for your cross-platform web project. Supports unlimited menu levels.


10. Drawerr.js

Sliding Drawer Navigation In Pure JavaScript – Drawerr.js

Demo Download

Drawerr.js is a JavaScript library that converts a nested html list into a mobile-friendly, off-canvas, multi-level drawer navigation for your cross-platform webpage.


Read More:

10 Best Off-canvas Mobile Menus In jQuery/JavaScript/CSS