jQuery Script Blog

10 Best Off-canvas Mobile Menus In JavaScript And CSS (2026 Update)

by jQueryScript,
off canvas menumobile menu

What is Off-canvas Mobile Menu

Off-canvas Mobile Menu is a cross-platform navigation design concept for modern web & mobile design. It is now widely used on web and mobile applications.

The off-canvas navigation system enables the visitor to show/hide your site navigation in an elegant way, as you see on most mobile App.

The Best Off-canvas Mobile Menu

In this blog post you will find the 10 best Off-canvas Mobile Navigation Systems implemented in jQuery, Vanilla JavaScript and Pure CSS/CSS3. Have fun.

Not a jQuery user? View Top 10 Pure JavaScript & CSS Off-canvas Menus.

Originally Published Nov 12 2017, updated Jan 17 2026

Table of contents:

jQuery Off-canvas Mobile Menu Plugins:

Responsive Dashboard Sidebar Menu Templates - DashNav

A set of responsive, mobile-friendly, multi-level sidebar navigation templates designed for dashboards & admin panels.

Features:

  • Based on jQuery and Bootstrap 5.
  • Custom scrollbar based on jQuery Perfect Scrollbar.
  • Dark & Light themes.
  • Compact & Full views.
  • Auto collapses the sidebar into an off-canvas menu on mobile.

Responsive Dashboard Sidebar Menu Templates - DashNav

[Demo] [Download]

Stackable Multi-level Sidebar Menu - hc-offcanvas-nav

HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, fully accessible, off-canvas side navigation that supports endless nesting of submenu elements.

The hc-offcanvas-nav slides out from the left or right side of the webpage when toggled and overlaps (or expands) submenus when a parent menu is opened.

Stackable Multi-level Sidebar Menu - hc-offcanvas-nav

[Demo] [Download]

Cross-platform Multi-level Dropdown Menu - Vegas Nav

A JavaScript-powered cross-platform navigation system to help you create a responsive, mobile-friendly, multi-level dropdown navbar for your web app.

  • Collapses the navbar into an off-canvas side nav on small screens.
  • Supports desktop, laptop, tablet, and mobile.
  • Supports multi-column mega menu.
  • Ultra light and dead simple to use.
  • Semantic and SEO-friendly. Built with nested HTML lists.
  • Without 3rd-party dependencies (v3+).
  • Scrollspy functionality (v3+).

Cross-platform Multi-level Dropdown Menu - Vegas Nav

[Demo] [Download]

Offcanvas Navigation With Accordion/Tree Menus - Sidebar Menu

A jQuery/Bootstrap based responsive, multi-level, SEO-friendly, mobile-compatible, off-canvas sidebar navigation created for dashboard, admin panel, web app designs.

Features:

  • Collapses and expands sub menus just like an accordion and tree.
  • Auto hides on mobile devices.
  • 2 themes: Dark and Light.
  • 2 styles: Style 1 Demo/Style 2 Demo.
  • Also provides a Skeleton for developers.
  • Compatible with Bootstrap 5 and Bootstrap 4.

Offcanvas Navigation With Accordion/Tree Menus - Sidebar Menu

[Demo] [Download]

Slick and App-Like Sliding Menu Plugin With jQuery - Mmenu

A simple yet robust JavaScript/jQuery plugin for creating responsive, accessible, modular, flexible, mobile-friendly, and app-like sliding menus for your mobile website, all with an unlimited amount of submenus.

Slick and App-Like Sliding Menu Plugin With jQuery - Mmenu

[Demo] [Download]

Vanilla JS Off-canvas Mobile Menu Libraries:

Responsive Mega Menu In JavaScript

A modern, responsive mega menu template for online stores. Written in Pure JavaScript and CSS/CSS3.

When the screen size is smaller than 992px, the mega menu will be collapsed into a multi-level sidebar menu, which is togglable with a hamburger button.

Responsive Mega Menu In JavaScript

[Demo] [Download]

Responsive Multi-level Sidebar Menu With JavaScript/CSS

A responsive sidebar menu with multi-level sub-menus written in plain JavaScript and CSS. The sidebar menu is displayed in Compact mode on page load and will expand to Full mode when hovering over.

It collapses the sidebar into an off-canvas navigation on mobile, and your visitors are able to reveal the menu by clicking the hamburger button.

Responsive Multi-level Sidebar Menu With JavaScript/CSS

[Demo] [Download]

Responsive Multi-level Dropdown Menu With JavaScript And CSS – ozmenu.js

A modern, clean, responsive, multi-level dropdown menu written in vanilla JavaScript and CSS.

The key feature of this dropdown menu is that it can automatically convert into an off-canvas side navigation on mobile devices, ensuring your website or web app remains easy to navigate and use on any device.

In addition, the menu supports multiple levels of dropdown items, which is great for content-rich websites with complex navigation structures.

Responsive Multi-level Dropdown Menu With JavaScript And CSS – ozmenu.js

[Demo] [Download]

Mobile-friendly Hamburger Navigation With Submenus

A responsive, mobile-friendly, cross-device, multi-level hamburger navigation written in JavaScript and CSS/CSS3.

Mobile-friendly Hamburger Navigation With Submenus

[Demo] [Download]

Pure CSS Off-canvas Mobile Menu Systems:

Hamburger Sidebar Navigation In Pure CSS – Sidebar-Menu

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

Hamburger Sidebar Navigation In Pure CSS – Sidebar-Menu

[Demo] [Download]

Simple Sidebar Hamburger Menu In CSS

A really simple sidebar hamburger menu written in plain HTML and CSS.

Simple Sidebar Hamburger Menu In CSS

[Demo] [Download]

More Resources:

Want more jQuery plugins or JavaScript libraries to create awesome Off-canvas Mobile Menus on the web & mobile? Check out the jQuery Off-canvas Menu and JavaScript/CSS Off-canvas Mobile Menu sections.

See also: