Bootstrap 5 offcanvas is used to make hidden sidebars within the project for navigation.
Example
Steps to create bootstrap 5 Offcanvas:
<button>
and <a>
elements.
<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 (#).
.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. .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.
.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>