Offcanvas component
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. Offcanvas includes support for a header with a close button and an optional body
class for some initial padding.
| Placement | ||
|---|---|---|
| Right placement | Basic offcanvas panel, sticked to the right of the
viewport. Requires .offcanvas-end modifier class to be added to
the offcanvas container. Offcanvas body is scrollable by default |
|
| Left placement | Basic offcanvas panel, sticked to the left of the viewport.
Requires .offcanvas-start modifier class to be added to the
offcanvas container. Offcanvas body is scrollable by default |
|
| Top placement | Basic offcanvas panel, sticked to the top of the viewport.
Requires .offcanvas-top modifier class to be added to the
offcanvas container. Not scrollable and takes all available space |
|
| Bottom placement | Basic offcanvas panel, sticked to the bottom of the
viewport. Requires .offcanvas-bottom modifier class to be added
to the offcanvas container. Not scrollable and takes all available space
|
|
| Content | ||
| Tabbed content | Vertical offcanvas panel with justified tabs. Content is scrollable | |
| Header with subtitle | Offcanvas panel supports header and footer. Header can contain single or multiple lines of text (title and subtitle) in different colors and sizes, and optional close button | |
| Centered content | Offcanvas panel body text can be centered in 2 directions - vertical and
horizontal. Useful for showing empty statuses, errors or actions. Add
.d-flex to offcanvas body and wrap inner content in a
div with .m-auto class. |
|
| Sticky footer | Offcanvas panels also support footers made with custom markup. Headers are always sticked to the top, footers to the bottom and body is scrollable. | |
| Options | ||
| Disable backdrop | Disable offcanvas backdrop by adding data-bs-backdrop="false"
to the offcanvas container. Clicking outside doesn't close the panel, but
Escape key works as expected |
|
| Disable keyboard interaction | Disable keyboard interaction with offcanvas by adding
data-bs-keyboard="false" to the offcanvas container. By default
offcanvas panel can be closed when escape key is pressed |
|
| Resizable offcanvas | In some cases you may need to increase or decrease offcanvas size by dragging a handle. For instance, list of notifications or preview of some content. We have added a custom solution for left and right panels, where you can set min and max widths in data attributes in offcanvas container | |
| Remote source | Load remote source with vanilla JS. Optionally you can add loading
animation. Content is injected in onShow offcanvas callback
|
|
| Panel sizing | ||
| Mini size | Offcanvas panel in xs size. Mini panel width is 60px (default
icon size + 20px padding on both sides). To use, add
offcanvas-xs class to offcanvas container |
|
| Small size | Offcanvas panel in sm size. Small panel width is 156px (mini
size + additional 50px on both sides). To use, add offcanvas-sm
class to offcanvas container |
|
| Default size | Offcanvas panel in default size. Default panel width is 320px.
Since this is a default size, panel markup doesn't require any additional
sizing classes |
|
| Large size | Offcanvas panel in lg size. Large panel width is 400px. To use,
add offcanvas-lg class to offcanvas container |
|
| Optional panel header/footer colors | ||
| Primary header/footer | Primary color theme. To use, add .bg-primary.text-white classes
to .offcanvas-header and/or offcanvas footer containers |
|
| Danger header/footer | Danger color theme. To use, add .bg-danger.text-white classes
to .offcanvas-header and/or offcanvas footer containers |
|
| Success header/footer | Success color theme. To use, add .bg-success.text-white classes
to .offcanvas-header and/or offcanvas footer containers |
|
| Warning header/footer | Warning color theme. To use, add .bg-warning.text-white classes
to .offcanvas-header and/or offcanvas footer containers |
|
| Info header/footer | Info color theme. To use, add .bg-warning.text-white classes to
.offcanvas-header and/or offcanvas footer containers |
|
| Dark header/footer | Dark color theme. To use, add .bg-dark.text-white classes to
.offcanvas-header and/or offcanvas footer containers |
|
| Light header/footer | Light color theme. To use, add .bg-light.text-white classes to
.offcanvas-header and/or offcanvas footer containers |
|
| Custom color theme | Custom color theme. To use, add
.bg-[pink|purple|indigo|teal|yellow] and
.text-white classes from the color system to
.offcanvas-header and/or footer containers |
|
| Panel events | ||
| onShow event | This event fires immediately when the show instance method is
called. If caused by a click, the clicked element is available as the
relatedTarget property of the event |
|
| onShown event | This event is fired when the panel has been made visible to the user (will
wait for CSS transitions to complete). If caused by a click, the clicked
element is available as the relatedTarget property of the event
|
|
| onHide event | This event is fired immediately when the hide instance method
has been called |
|
| onHidden event | This event is fired when the panel has finished being hidden from the user (will wait for CSS transitions to complete) | |
