Bootstrap 5 Offcanvas Usage Options

Bootstrap 5 Offcanvas Usage Options are employed to manually regulate the off-canvas element's display. Bootstrap 5 Offcanvas can be triggered using data attributes and JavaScript. 

Bootstrap 5 Offcanvas Usage Options Attribute:

• data-bs-*: Options should be passed as data attributes in the off-canvas container.

Bootstrap 5  Offcanvas Usage Options:  These are the option that is replaceable with * of data-bs-*.

• backdrop: This option is used to add a backdrop to the background when the offcanvas is open. The type is boolean and the default value is true.
• keyboard: It determines whether the escape key on the keyboard can close the offcanvas. The type is boolean and the default value is true.
• scroll: This option determines whether the background can be scrolled or not. The type is boolean and the default value is false.

Syntax:

<div class="offcanvas" data-bs-*=value>
 <!-- Offcanvas Content --!>
</div>

Note: The * in the data-bs-* is replaced by the name of one of the options given above.

Example 1: This code example shows how to implement the backdrop and keyboard usage options:

Output:

Example 2: This code example shows how to implement the backdrop and scroll usage options together:

Output:

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