Bootstrap 5 Offcanvas Usage Events

Bootstrap 5 Offcanvas Events fired when interacting with the Bootstrap 5 offcanvas. For example, these events are fired when an off-canvas element is toggled to be visible or hidden.

Bootstrap 5 Offcanvas Usage Events:

• show.bs.offcanvas: It is fired when the show instance method of the dropdown is called. 
• shown.bs.offcanvas: It is fired when the offcanvas is completely visible to the user after all the CSS transitions are done.
• hide.bs.offcanvas: It is fired when the hide instance method of the dropdown is called.
• hidden.bs.offcanvas : It is fired when the off-canvas is completely hidden from the user after all the CSS transitions are done.

Syntax:

offcanvasEl.addEventListener(offcanvas_event, callbackFunction);

Let us understand more about this using some examples below.

Example 1: In this example, we will listen for the offcanvas events that get fired when the offcanvas is toggled to be visible.

Output:

Example 2: In this example, we will listen for the offcanvas events that get fired when the offcanvas is toggled to be hidden.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#events