Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Example
Click the accordions below to expand/collapse the accordion 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. Body scrolling
Scrolling the body
element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll
attribute to enable body
scrolling.
Placement
There’s no default placement for offcanvas components, so you must add one of the modifier classes below.
.offcanvas-start
places offcanvas on the left of the viewport (shown above).offcanvas-end
places offcanvas on the right of the viewport.offcanvas-top
places offcanvas on the top of the viewport.offcanvas-bottom
places offcanvas on the bottom of the viewport