How to make use of it:

1. Install & build.

$ npm i offcanvas

$ npm install
$ npm run-script build

2. Load the offcanvas.bundle.js JavaScript library within the doc.

<link rel="stylesheet" href="./offcanvas.css" />
<script src="./dist/offcanvas.bundle.js"></script>

3. Or import the off-canvas as an ES module.

@import 'offcanvas/offcanvas.css';
import 'offcanvas';

4. Create off-canvas menus on the web page.

<div class="offcanvas left" data-offcanvas="navleft">
  <p>This is the left nav</p>
  <button data-offcanvas-trigger="navleft">This will close the nav</button>
</div>

<div class="offcanvas right" data-offcanvas="navright">
  <p>This is the right nav</p>
</div>

5. Create trigger buttons to toggle the off-canvas menus.

<div class="offcanvas-content" data-offcanvas-content>
  <div class="buttons" data-offcanvas-fixed>
    <button data-offcanvas-trigger="navleft">Show left nav</button>
    <button data-offcanvas-trigger="navright">Show right nav</button>
  </div>
  ... main content here ...
</div>

6. Wrap them right into a container with the CSS class of offcanvas-wrapper.

<div class="offcanvas-wrapper">
  ...
</div>

7. Enable the off-canvas menu only when operating on mobile gadgets.

<div class="offcanvas right" data-offcanvas="navright" data-offcanvas-match="(max-width: 767px)">
  <p>This is the right nav</p>
</div>

Lightweight Off-canvas (Push) Menu, offcanvas Plugin/Github, off canvas menu elementor

See Demo And Download