Bootstrap 5 Offcanvas
Bootstrap Offcanvas is a component that provides a flexible way to create side navigation or content that can be revealed or hidden by sliding in or out of view. Here's a basic example of how to use Bootstrap Offcanvas:
How To Create an Offcanvas Sidebar
The following example shows how to create an offcanvas sidebar:
Example
<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
You can click on above box to edit the code and run again.Offcanvas Position
Use the .offcanvas-start|end|top|bottom to position the offcanvas to the left, right, top or bottom
Example
<div class="offcanvas offcanvas-end" id="demo">You can click on above box to edit the code and run again.
Responsive OffCanvas Menu
You can also control when you want to hide or show the offcanvas menu on different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes:
Example
<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">You can click on above box to edit the code and run again.
Dark OffCanvas Menu
Use the .text-bg-dark class to create a dark offcanvas menu.