Bootstrap 5 offcanvas is used to make hidden sidebars within the project for navigation.
Steps to create bootstrap 5 Offcanvas:
<button>
and <a>
element.
<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(#).
.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. .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.
Note:Follow the above mention process to make bootstrap 5 offcanvas component.