A Lightweight Alternative to the mmenu Plugin for Creating Off-Canvas Mobile Menus

The mmenu-light is a lite version of the menu plugin that makes it easy to create a hamburger move out of the canvas just like the original mobile app.

It’s easy to implement a very clean and easy-to-use mobile navigation system into your web application in just a minute.

[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

How to make use of it:

Import the stylesheet mmenu-light.css and JavaScript mmenu-light.js into the HTML.

<link rel="stylesheet" href="./dist/mmenu-light.css" />
<script src="./dist/mmenu-light.js"></script>

Create an anchor link for the hamburger toggle button.

<a href="#menu"><span></span></a>

Create a multi-level off-canvas menu from nested HTML lists.

<nav id="menu">
    <li class="Selected"><a href="#">Home</a></li>
    <li><span>About us</span>
        <li><a href="#about/history">History</a></li>
        <li><span>The team</span>
            <li><a href="#about/team/management">Management</a></li>
            <li><a href="#about/team/sales">Sales</a></li>
            <li><a href="#about/team/development">Development</a></li>
        <li><a href="#about/address">Our address</a></li>
    <li><a href="#contact">Contact</a></li>

Initialize the off-canvas navigation. Possible choices:

const menu = new MmenuLight( document.querySelector( '#menu' ), 'all');

Create a set navigation bar. Possible choices:

var navigator = menu.navigation({
    // selectedClass: 'Selected',
    // slidingSubmenus: true,
    // theme: 'dark',
    // title: 'Menu'

Activate the off-canvas navigation. Possible choices:

var drawer = menu.offcanvas({
    // position: 'left'

Enable the hamburger button to toggle the off-canvas navigation.

document.querySelector( 'a[href="#menu"]' )
.addEventListener( 'click', evnt => {

Open a panel within the navigation.

  menu.querySelector( "ul" );

Open/shut the navigation.


Lightweight Mobile App Navigation System, mmenu light Plugin/Github

See Demo And Download

Official Website(FrDH): Click Here

This superior jQuery/javascript plugin is developed by FrDH. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…