Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript
plugin.
Basic Example #
Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the
.show
class on an element with the
.offcanvas
class.
-
.offcanvashides content (default) -
.offcanvas.showshows content
You can use a link with the
href
attribute, or a button with the
data-bs-target
attribute. In both cases, the
data-bs-toggle="offcanvas"
is required.
Example
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists,
etc.
<div class="row g-3">
<div class="col-auto">
<a
class="btn btn-primary"
data-bs-toggle="offcanvas"
href="#offcanvasExample"
role="button"
aria-controls="offcanvasExample"
>Link with href</a
>
</div>
<div class="col-auto">
<button
class="btn btn-primary"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasExample"
aria-controls="offcanvasExample"
>
Button with data-bs-target
</button>
</div>
</div>
<div
class="offcanvas offcanvas-start"
tabindex="-1"
id="offcanvasExample"
aria-labelledby="offcanvasExampleLabel"
>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button
type="button"
class="sa-close sa-close--modal"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have
chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-4">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdown-menu-button-inside-offcanvas"
data-bs-toggle="dropdown"
>
Dropdown button
</button>
<ul
class="dropdown-menu"
aria-labelledby="dropdown-menu-button-inside-offcanvas"
>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
Placement #
There's no default placement for offcanvas components, so you must add one of the modifier classes below;
-
.offcanvas-startplaces offcanvas on the left of the viewport (shown above) -
.offcanvas-endplaces offcanvas on the right of the viewport -
.offcanvas-topplaces offcanvas on the top of the viewport -
.offcanvas-bottomplaces offcanvas on the bottom of the viewport
Try the top, right, and bottom examples out below.
Example
Offcanvas top
...
Offcanvas end
...
Offcanvas bottom
...
Offcanvas start
...
<div class="row g-3">
<div class="col-auto">
<button
class="btn btn-primary"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasTop"
aria-controls="offcanvasTop"
>
Top offcanvas
</button>
</div>
<div class="col-auto">
<button
class="btn btn-primary"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasEnd"
aria-controls="offcanvasEnd"
>
End offcanvas
</button>
</div>
<div class="col-auto">
<button
class="btn btn-primary"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasBottom"
aria-controls="offcanvasBottom"
>
Bottom offcanvas
</button>
</div>
<div class="col-auto">
<button
class="btn btn-primary"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasStart"
aria-controls="offcanvasStart"
>
Start offcanvas
</button>
</div>
</div>
<div
class="offcanvas offcanvas-top"
tabindex="-1"
id="offcanvasTop"
aria-labelledby="offcanvasTopLabel"
>
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button
type="button"
class="sa-close sa-close--modal"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">...</div>
</div>
<div
class="offcanvas offcanvas-end"
tabindex="-1"
id="offcanvasEnd"
aria-labelledby="offcanvasEndLabel"
>
<div class="offcanvas-header">
<h5 id="offcanvasEndLabel">Offcanvas end</h5>
<button
type="button"
class="sa-close sa-close--modal"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">...</div>
</div>
<div
class="offcanvas offcanvas-bottom"
tabindex="-1"
id="offcanvasBottom"
aria-labelledby="offcanvasBottomLabel"
>
<div class="offcanvas-header">
<h5 id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button
type="button"
class="sa-close sa-close--modal"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">...</div>
</div>
<div
class="offcanvas offcanvas-start"
tabindex="-1"
id="offcanvasStart"
aria-labelledby="offcanvasStartLabel"
>
<div class="offcanvas-header">
<h5 id="offcanvasStartLabel">Offcanvas start</h5>
<button
type="button"
class="sa-close sa-close--modal"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">...</div>
</div>