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-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
