Bootstrap 5 Offcanvas Usage Via Data Attributes

An Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. The data-attributes approach needs two attributes. These data attributes are added to the anchor link or button which is used to trigger the off-canvas. Offcanvas class is added to the div which is the off-canvas. container. 

Bootstrap 5 Offcanvas Usage Data Attributes:

• data-bs-toggle: we need to add "offcanvas" as a value to this attribute.
• data-bs-target: We add the id/class(CSS selector) of the off-canvas container as a value to this attribute.

Syntax:

<button class="btn" type="button" 
 data-bs-toggle="offcanvas" 
 data-bs-target="id">...
</button>
<div class="offcanvas" id="...">
 ...
</div>

Example 1: The example below demonstrates how we can trigger the offcanvas using the data-attributes.

Output:

👁 Image

Example 2: The example below demonstrates how we can trigger the offcanvas using the data-attributes in the button which triggers a top off-canvas using the offcanvas-top.

Output:

👁 Image

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