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