Bootstrap 5 Offcanvas Usage Via JavaScript

Bootstrap 5 Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. For using it with JavaScript we need to add a function and use the predefined show() method to trigger the off-canvas from a button or link. 

Prerequisite

• Bootstrap 5 Offcanvas Usage
• Bootstrap 5 offcanvas usage Methods

Bootstrap 5 Offcanvas Via JavaScript Used classes and methods:

To implement offcanvas using JavaScript an understanding of the different classes and methods in the Bootstrap 5 Offcanvas Usage and Bootstrap 5 Offcanvas Usage Methods is required. 

Syntax:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
 return new bootstrap.Offcanvas(offcanvasEl)
})

Example 1: This code example shows how to implement the usage of offcanvas via JavaScript.

Output:

Example 2: The example below demonstrates how we can trigger the offcanvas using JavaScript which triggers a top offcanvas using the offcanvas-top class.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/offcanvas/#via-javascript