BS5 Offcanvas
Bootstrap 5 Offcanvas
Offcanvas is comparable to modals, which are often hidden and displayed when activated. However, offcanvas is frequently utilized as a sidebar navigation menu.
==== button mukavu ====
How To Create an Offcanvas Sidebar
An example of how to make an offcanvas sidebar is provided below:
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>
Example Explained
The offcanvas sidebar is created by the .offcanvas class.
The offcanvas is positioned and made 400 pixels wide by the .offcanvas-start class. For further positioning classes, view the examples below.
Line-height and margin alignment are guaranteed by the .offcanvas-title class.
After that, fill the .offcanvas-body class with your content.
You need to utilize a <button> or <a> element that points to the id of the .offcanvas container (#demo in our example) in order to open the offcanvas sidebar.
Instead of using the data-bs-target attribute, you can use the href attribute to point to #demo in order to open the offcanvas sidebar using a <a> element.
Offcanvas Position
==== button mukavu ====
To move the offcanvas to the left, right, top, or bottom, use the .offcanvas-start|end|top|bottom:
Right Example
<div class="offcanvas offcanvas-end" id="demo">
==== button mukavu ====
Top Example
<div class="offcanvas offcanvas-top" id="demo">
==== button mukavu ====
Bottom Example
<div class="offcanvas offcanvas-bottom" id="demo">
==== button mukavu ====
Responsive OffCanvas Menu
Additionally, you can use the to choose when to reveal or conceal the offcanvas menu on various screen sizes.classes: offcanvas-sm|md|lg|xl|xxl
Example
<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
Dark OffCanvas Menu
To make a dark offcanvas menu, use the .text-bg-dark class.
Tip: Additionally, the .btn-close-white class has been added to .btn-close in order to provide a white close button that complements the dark background nicely:
Example
<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
