Lightweight Off-canvas (Push) Menu JavaScript Library – offcanvas.js

Preview:

Description:

offcanvas.js is a lightweight JavaScript library that helps developers quickly build a mobile-style off-canvas navigation (push menu) on your web app.

How to use it:

1. Install & build.

$ npm i offcanvas

$ npm install
$ npm run-script build

2. Load the offcanvas.bundle.js JavaScript library in the document.

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

3. Or import the offcanvas as an ES module.

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

4. Create offcanvas menus on the 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 offcanvas 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 into a container with the CSS class of offcanvas-wrapper.

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

7. Enable the off-canvas menu only when running on mobile devices.

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

Changelog:

v3.3.0 (05/12/2023)

• Firing event on hide/show