Overview
Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke our JavaScript.
Example
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Code Example
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample"> Link with href </a> <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 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="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"> <em class="ni ni-cross icon"></em> </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-3"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> <span>Dropdown button</span><em class="ni ni-chevron-down icon"></em> </button> <div class="dropdown-menu dropdown-menu-sm"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> </ul> </div> </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