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.