Bootstrap 5 Offcanvas: How To Create Easily?

Bootstrap 5 Offcanvas Menu

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

Steps to create a Bootstrap 5 Offcanvas:

• To show and hide offcanvas elements, 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 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 .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>

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>

To read more about Bootstrap 5 offcanvas menu, click here.