Bootstrap 5 Offcanvas Backdrop

Bootstrap 5 Offcanvas Backdrop is the greyish translucent cover that is all over the background which is shown when the off-canvas opens. There are three settings in which we can use an offcanvas, the default one is the offcanvas with the backdrop and no body scrolling. The two others are the one with the body scrolling and no backdrop and the one with both body scrolling and backdrop. For the second setting, we have to add data-bs-scroll="true" data-bs-backdrop="false"  attributes in the offcanvas , and for the last one, we have to add the data-bs-scroll="true" attribute in the offcanvas.

Bootstrap 5 Offcanvas Backdrop Attributes:

• data-bs-scroll: This attribute need to be "true" to make both with the body scrolling and no backdrop and one with both body scrolling and backdrop.
• data-bs-backdrop: This attribute needs to be "true" to make the one with both body scrolling and backdrop. This attribute needs to be "false" for the offcanvas with the body scrolling and no backdrop. toggle the backdrop.

Syntax:

<div class="offcanvas offcanvas-start" data-bs-backdrop="true" id="...">
 <div class="offcanvas-header">
 <h1 class="offcanvas-title">
 ...
 </h1>
 <button type="button" class="btn-close">
 </button>
 </div>
 <div class="offcanvas-body">
 <p>...</p>
 </div>
</div>

Example 1: The example below demonstrates the default offcanvas with backdrop without body scrolling and the offcanvas with body scrolling:

Output:

Example 2: The example below demonstrates the off-canvas with both body scrolling and backdrop.

Output:

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