10 Best Mobile-friendly Off-canvas Navigation Systems (2021 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 Apr 05 2021

1. Touch side swipe

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. Animated Sidebar Navigation with JavaScript and CSS

Animated Sidebar Navigation with JavaScript and CSS

Demo Download

A JavaScript & CSS based sidebar interaction concept for easily creating an off-canvas sidebar navigation that you can hide/show based on user actions.


3. Slide Menu

Slide Menu

Demo Download

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.


4. CSS Only Responsive Fixed Sidebar Navigation

CSS Only Responsive Fixed Sidebar Navigation

Demo Download

A CSS only responsive fixed sidebar navigation that collapses into a bottom nav bar on mobile devices.


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


6. Sidebar-Menu

Sidebar-Menu

Demo Download

A hamburger sidebar navigation (also called off-canvas menu & push menu) built using checkbox input, CSS/CSS3, and Font Awesome icons.


7. Off-canvas Sidebar Push Navigation In Pure CSS/CSS3

Off-canvas Sidebar Push Navigation In Pure CSS/CSS3

Demo Download

A mobile-first, off-canvas sidebar navigation (push menu) system written in pure CSS/CSS3 and checkbox tricks.


8. Pure CSS Sidebar Toggle Menu – Sidekick

Pure CSS Sidebar Toggle Menu – Sidekick

Demo Download

A pure HTML / CSS based off-screen sidebar menu for your mobile site navigation.


9. Menue

Responsive Dropdown/Off-canvas Navigation In Vanilla JavaScript – Menue

Demo Download

A responsive, multi-level, cross-platform dropdown/off-canvas navigation system for both desktop and mobile.


10. 5 Off-canvas Hamburger Navigation Variations

5 Off-canvas Hamburger Navigation Variations

Demo Download

A project contains 5 off-canvas hamburger navigation variations from which you can choose to bring the native app navigation experience to your webpage.


Read More:

You Might Be Interested In: