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