Top 10 Mobile-friendly Off-canvas Navigation Systems Of 2018

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 Dec 10 2018

1. 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.


2. Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript

Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript

Demo Download

A pure JavaScript/CSS based hamburger navigation that allows you to toggle an off-screen sidebar menu when you click on the hamburger trigger.


3. Responsive Hamburger Menu In Pure CSS

Responsive Hamburger Menu In Pure CSS

Demo Download

This is a CSS only responsive, multi-level menu that expands the hamburger toggle button into a horizontal drop-down nav on the desktop or an off-canvas side menu on mobile.


4. 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.


5. 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.


6. 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.


7. ApocSidebar

Fancy Off-canvas Sidebar Component In Pure JavaScript – ApocSidebar

Demo Download

ApocSidebar is an ES 5/6 JavaScript sidebar component that allows to reveal off-screen sidebars with some cool animations based on CSS3. Ideal for mobile-friendly off-canvas navigation.


8. 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.


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

CSS Only 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.


10. 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.


Read More:

Top 50 Best Off-canvas Navigation jQuery Plugins