Bootstrap 5 Offcanvas Components

Bootstrap 5 Offcanvas components are the different parts that merge to create an offcanvas sidebar. The components which constitute an offcanvas are a header with a close button and a body section which is optional and we can also add some action buttons on the footer section which are optional too.

Bootstrap 5 Offcanvas components used Classes:

• offcanvas-start: This class is added to signify the start of the offcanvas.
• offcanvas-header: This class is added to signify the header of the offcanvas.
• offcanvas-title: This class is added to signify the title inside the header of the offcanvas.
• offcanvas-body: This class is added to signify the content body of the offcanvas.

Syntax:

<div class="offcanvas" id="...">
 <div class="offcanvas-header">
 <h1 class="offcanvas-title">
 ...
 </h1> 
 </div>
 <div class="offcanvas-body">
 ...
 </div>
</div>

Example 1: The code below demonstrates how we can use all the components to create a basic Offcanvas Sidebar:

Output:

Example 2: The example below demonstrates how we can use the components to implement the offcanvas with both body scrolling and backdrop.

Output:

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