Bootstrap 5 Offcanvas

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

Example

Steps to create bootstrap 5 Offcanvas:

  • To show and hide offcanvas elements, use <button> and <a> elements.
  • 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 contain the offcanvas container id preceded by a hash character (#).
  • Assign.offcanvas followed by one of the (.offcanvas-start,.offcanvas-end,.offcanvas-top,.offcanvas-bottom )to the offcanvas container and also assign a 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 the .offcanvas-body container.

General Syntax

      <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample">Offcanvas features</a>
<div class="offcanvas offcanvas-start" id="offcanvasExample">
  <div class="offcanvas-header"></div>
  <div class="offcanvas-body"></div>
</div>
  
Try it now

Source Code

          <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" >
  <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" ></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

Online Test / Quiz

Web Tutorials

Bootstrap 5 Offcanvas
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4