Bootstrap 5 Offcanvas

Bootstrap 5 offcanvas is used to make hidden sidebars within the project for navigation.

Steps to create bootstrap 5 Offcanvas:

To show and hide offcanvas element, use <button> and <a> element.
Use link <a> with href attribute and <button> with the data-bs-target attribute. In both cases, use the data-bs-toggle="offcanvas".Please keep in mind that href and data-bs-target contains the offcanvas container id preceded by hash character(#).
Assign.offcanvas followed by one of the (.offcanvas-start,.offcanvas-end,.offcanvas-top,.offcanvas-bottom )to the offcanvas container and also assign unique id to offcanvas container.
Assign .offcanvas-header Offcanvas header container and place offcanvas header title and assign .offcanvas-title and also place <button> and assign data attribute data-bs-dismiss="offcanvas" and assign btn-close.text-reset element.
Write offcanvas content inside .offcanvas-body container.

General Syntax

Source Code

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
 Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
 Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
 <div class="offcanvas-header">
  <h5 class="offcanvas-title" id="offcanvasExampleLabel">
   Bootstrap Offcanvas Component
  </h5>
  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
 <div class="offcanvas-body">
  <div>
   <img src="https://picsum.photos/200/300" alt="This is an external image" class="img-fluid rounded-circle" style="width: 100px; height: 100px;" />
  </div>
  <ul class="nav flex-column">
   <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" href="#">About</a>
   </li>
  </ul>
  <div class="dropdown mt-3">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
    Tutorials
   </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Learn HTML</a></li>
   </ul>
  </div>
 </div>
</div>

Try it now

Code Explanation

Note:Follow the above mention process to make bootstrap 5 offcanvas component.

Online Test / Quiz

Question set 1

Bootstrap 5 Offcanvas

General Syntax

Source Code

Code Explanation

Online Test / Quiz

Our Tutorials