Bootstrap - Offcanvas Part 5: Advanced Offcanvas Features

JavaScript Control

You can control the offcanvas programmatically using Bootstrap’s JavaScript API.

Example 1: Programmatically Show Offcanvas

const offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasExample'));

offcanvas.show();

Example 2: Detect Events

document.getElementById('offcanvasExample').addEventListener('show.bs.offcanvas', function () {

  console.log('Offcanvas is about to be shown!');

});

Example 3: Dismiss Offcanvas

offcanvas.hide();

Explanation:

JavaScript allows developers to control the Offcanvas component dynamically, enhancing interactivity and flexibility.