10 Best Mobile-friendly Off-canvas Navigation Systems (2020 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 May 10 2020

1. Responsive Sidebar Navigation with JavaScript and CSS3

Vertical Responsive Menu

Demo Download

Vertical Responsive Menu is a small JavaScript library that helps you create a mobile-friendly, fully responsive and space-saving sidebar navigation for your web projects.


2. Simple Off-canvas Push Menu with Pure JavaScript – Slideout.js

Slideout.js

Demo Download

Slideout.js is a pure JavaScript library for creating a mobile-friendly sidebar push menu on your web applications.


3. Tiny Off-canvas Menu with JavaScript and CSS3

tiny-off-canvas-menu-with-javascript-and-css3

Demo Download

A mobile-friendly off-canvas push menu with a hamburger toggle button built using CSS3 and a little JavaScript magic.


4. HTML And CSS Only Off-canvas Drawer Navigation

HTML And CSS Only Off-canvas Drawer Navigation

Demo Download

Just another responsive off-canvas drawer navigation built on top of CSS, CSS3 and checkbox element.


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

canvi

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.


6. CSS Only Off-canvas Navigation Using CSS Pseudo-class

css-off-canvas-navigation-using-css-pseudo-class

Demo Download

A pure CSS, mobile-friendly off-canvas navigation system built using plain HTML/CSS/CSS3 and :focus-within CSS pseudo-class.


7. Smooth Performant Sliding Drawer Navigation For Web App – SuperSlide.js

Smooth Performant Sliding Drawer Navigation For Web App - SuperSlide.js-min

Demo Download

SuperSlide.js is a lightweight, customizable, high-performance sliding drawer (off-canvas) navigation designed for modern web applications.


8. Dynamic Sliding Drawer Navigation In Pure JavaScript – Hipsbar

Dynamic Sliding Drawer Navigation In Pure JavaScript - Hipsbar

Demo Download

Hipsbar.js is a native JavaScript library to dynamically generate a sliding drawer (off-canvas) navigation on your web app.


9. Off-canvas Side Navigation With Page Transitions

Off-canvas Side Navigation With Page Transitions

Demo Download

A modern sticky off-canvas sidebar navigation where the users are able to switch between page sections with a smooth transition effect by clicking nav links.


10. Material Design Inspired Off-canvas Push Nav – 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.


Read More:

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

You Might Be Interested In: