10 Best Mobile-friendly Off-canvas Navigation Systems (2022 Update)

Off-canvas navigation has long been a go-to design pattern for creating navigation interfaces that are both user-friendly and semantically solid. Simply put, off-canvas navigation involves moving the navigation out of view by default and bringing it into view upon interaction. This functionality is easily achieved in modern web browsers using pure CSS (and sometimes HTML5/JavaScript).

The technology is constantly changing, so most of the frameworks have evolved. Many beginners or even experts would easily get lost trying to build one on their own, but here’s a list of resources that should come in handy if you are looking to build one from scratch.

I’ve hand-picked 10 of the best JavaScript and CSS-based mobile app-style off-canvas navigation menus written entirely in Vanilla JavaScript or pure CSS. Enjoy!.

Originally Published Nov 10 2017, updated Feb 20 2022

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.


Conclusion:

Off-canvas navigation is gaining further popularity as more people start to realize its value. Apps like Facebook, Twitter, and even Medium have all decided to go with this navigation mode for the mobile version of their websites.

This is maybe the most important reason why we have decided to create our own list of 10 best off-canvas menus: we want you to use them on your website or app too. Naturally, we couldn’t pick all of our favorites, so the ones we chose are all very reliable in terms of both performance and coding quality.

Read More:

You Might Be Interested In: