Offcanvas components work like modals—they're hidden by default and appear when triggered—but are typically used as sidebar navigation menus.
The example below demonstrates how to build an offcanvas sidebar.
| Class / Attribute | Description |
|---|---|
.offcanvas |
Creates the main offcanvas sidebar container. |
.offcanvas-start |
Positions the offcanvas on the left side and sets its width to 400px. |
.offcanvas-title |
Styles the title with appropriate margin and line-height. |
.offcanvas-body |
Holds the main content inside the offcanvas. |
<button> / <a> + data-bs-toggle="offcanvas" |
Triggers the offcanvas sidebar when clicked. |
href="#demo" |
Alternative way (for <a>) to point to the offcanvas ID. |
data-bs-target="#demo" |
Specifies the target ID of the offcanvas to open (used in buttons). |
Apply .offcanvas-start, .offcanvas-end, .offcanvas-top, or .offcanvas-bottom to position the offcanvas on the left, right, top, or bottom of the screen.
You can manage the visibility of the offcanvas menu at different screen sizes using the .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, or .offcanvas-xxl classes
Apply the .text-bg-dark class to give the offcanvas menu a dark background with light-colored text.
Tip: The .btn-close-white class is added to .btn-close to display a white close button that contrasts well with the dark background.