Bootstrap 5 Offcanvas
Offcanvas
Offcanvas is similar to modals (hidden by default and shown when activated), except that is often used as a sidebar navigation menu.
Heading
Some text lorem ipsum.
Some text lorem ipsum.
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>
Try it Yourself »
Example Explained
The .offcanvas class creates the offcanvas sidebar.
The .offcanvas-start class positions the offcanvas, and makes it 400px wide.
See examples below for more positioning classes.
The .offcanvas-title class ensures proper margins and line-height.
Then, add your content inside the .offcanvas-body class.
To open the offcanvas sidebar, you must use a <button> or an <a> element that points to the id of the .offcanvas container (#demo in our example).
To open the offcanvas sidebar with an <a> element, you can point to #demo with the href attribute, instead of data-bs-target attribute.
Offcanvas Position
Use the .offcanvas-start|end|top|bottom to position the offcanvas to the left, right, top or bottom:
Right Example
<div class="offcanvas offcanvas-end"
id="demo">
Heading
Some text lorem ipsum.
Some text lorem ipsum.
Top Example
<div class="offcanvas offcanvas-top"
id="demo">
Heading
Some text lorem ipsum.
Some text lorem ipsum.
Bottom Example
<div class="offcanvas offcanvas-bottom"
id="demo">
Heading
Some text lorem ipsum.
Some text lorem ipsum.
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:
Dark OffCanvas Menu
Use the .text-bg-dark class to create a dark
offcanvas menu.
Tip: We have also added the .btn-close-white class to
.btn-close, to create a white close button that looks nice with the dark
background:
Example
<div class="offcanvas offcanvas-end"
id="demo">
<button type="button" class="btn-close
btn-close-white" data-bs-dismiss="offcanvas"></button>
Heading
Some text lorem ipsum.
Some text lorem ipsum.