Dynamic Offcanvas — Reference

Dynamic Offcanvas

Bootstrap 5 component. Add the component and configure its properties in the Inspector.

Dynamic Offcanvas Properties

Name	Description
ID	ID for the offcanvas. Sets the offcanvas container id . Use this id from toggles (buttons/links) via data-bs-target / href so Bootstrap opens the correct offcanvas panel. Bootstrap docs: Offcanvas Default: "". Attribute: id.
Class	Extra classes for the offcanvas. Adds extra CSS classes to the offcanvas container. Use this for custom utility classes (spacing, colors) or your own project styles without changing the component structure. Bootstrap docs: Offcanvas Default: "". Attribute: class.
Placement	Where the offcanvas appears. Controls where the offcanvas panel slides in from. Bootstrap supports placements like start , end , top , and bottom using the corresponding placement classes. Bootstrap docs: Offcanvas placement Options: Start (offcanvas-start), End (offcanvas-end), Bottom (offcanvas-bottom) Default: "".
Responsive	Responsive offcanvas behavior. Controls responsive behavior for the offcanvas component (when supported by the rule). Depending on the rule, the offcanvas can act as a static sidebar above a breakpoint and become an offcanvas panel below it. Bootstrap docs: Offcanvas Options: Responsive (offcanvas), Responsive Small (offcanvas-sm), Responsive Medium (offcanvas-md), Responsive Large (offcanvas-lg), Responsive XLarge (offcanvas-xl), Responsive XXLarge (offcanvas-xxl) Default: "offcanvas".
Backdrop	Backdrop overlay. Controls the backdrop overlay behind the offcanvas. When enabled, Bootstrap shows a backdrop and (depending on configuration) clicking it can dismiss the offcanvas. Disable it for persistent side panels. Bootstrap docs: Offcanvas backdrop Options: Yes, No (false), Static (static) Default: "". Attribute: backdrop.
Scroll	Allow body scrolling while open. Controls whether the page can scroll while the offcanvas is open. When enabled, the body is allowed to scroll behind the panel; when disabled, Bootstrap locks body scrolling for a more modal-like experience. Bootstrap docs: Offcanvas scrolling Default: false. Attribute: scroll.
Auto Show	Initial visibility of the offcanvas. Controls whether the offcanvas is initially shown. Typically offcanvas panels start hidden and are opened via triggers or programmatic actions. Bootstrap docs: Offcanvas Default: false. Attribute: show.
No Keyboard	Disables closing via Escape key. Prevents the offcanvas from closing with the Escape key. Use carefully; Escape-to-close is a common and expected behavior. Bootstrap docs: Options Default: false. Attribute: nokeyboard.

Text

Name	Description
Advanced	Advanced layout options. Advanced layout options provided by the rule. These typically map to Bootstrap utility classes (spacing, flex, display) to fine-tune layout. Bootstrap docs: Utilities API
Color	Options: Primary (text-primary), Primary Emphasis (text-primary-emphasis), Secondary (text-secondary), Secondary Emphasis (text-secondary-emphasis), Success (text-success), Success Emphasis (text-success-emphasis), Danger (text-danger), Danger Emphasis (text-danger-emphasis), Warning (text-warning), Warning Emphasis (text-warning-emphasis), Info (text-info), Info Emphasis (text-info-emphasis), Light (text-light), Light Emphasis (text-light-emphasis), Dark (text-dark), Dark Emphasis (text-dark-emphasis), Body (text-body), Body Emphasis (text-body-emphasis), Body Secondary (text-body-secondary), Body Tertiary (text-body-tertiary), Black (text-black), White (text-white), Black 50 (text-black-50), White 50 (text-white-50), Muted (deprecated) (text-muted) Default: "".
Text Opacity	Options: Default, 25% (text-opacity-25), 50% (text-opacity-50), 75% (text-opacity-75), 100% (text-opacity-100) Default: "".
Align	Controls text alignment. Controls text alignment using Bootstrap text utilities. Applies classes like text-start , text-center , text-end , including responsive variants (e.g. text-md-center ). Bootstrap docs: Text utilities Options: Start (text-start), Center (text-center), End (text-end) Default: "".
Font Weight	Controls font weight. Controls font weight using Bootstrap font-weight utilities. Applies fw-light , fw-normal , fw-bold , etc. Bootstrap docs: Font weight Options: Bold (fw-bold), Bolder (fw-bolder), Normal (fw-normal), Light (fw-light), Lighter (fw-lighter)
Line Height	Controls line height. Controls line height using Bootstrap line-height utilities. Applies lh-1 , lh-sm , lh-base , or lh-lg . Bootstrap docs: Line height Options: 1 (lh-1), Small (lh-sm), Base (lh-base), Large (lh-lg)
Font Style	Controls font style. Controls font style using Bootstrap font-style utilities. Applies utilities such as fst-italic and fst-normal when available. Bootstrap docs: Font style Options: Italic (fst-italic), Mark (mark), Lead (lead), Small (small), Monospace (font-monospace), Abbreviation (initialism)
Transform	Controls letter casing. Controls letter casing using Bootstrap text transform utilities. Applies text-lowercase , text-uppercase , or text-capitalize . Bootstrap docs: Text transform Options: Uppercase (text-uppercase), Capitalize (text-capitalize), Lowercase (text-lowercase) Default: "".
Overflow	Controls text overflow behavior. Controls text overflow behavior. Depending on the rule, this may apply text-truncate (requires constrained width) or other overflow helpers. Bootstrap docs: Text truncation Options: Prevent wrapping (text-nowrap), Truncate text with an ellipsis (text-truncate), Word Break (text-break) Default: "".

Appearance

Name	Description
Back Color	Options: Primary Contrast (text-bg-primary), Primary Background Only (bg-primary), Primary Subtle (bg-primary-subtle), Secondary Contrast (text-bg-secondary), Secondary Background Only (bg-secondary), Secondary Subtle (bg-secondary-subtle), Success Contrast (text-bg-success), Success Background Only (bg-success), Success Subtle (bg-success-subtle), Danger Contrast (text-bg-danger), Danger Background Only (bg-danger), Danger Subtle (bg-danger-subtle), Warning Contrast (text-bg-warning), Warning Background Only (bg-warning), Warning Subtle (bg-warning-subtle), Info Contrast (text-bg-info), Info Background Only (bg-info), Info Subtle (bg-info-subtle), Light Contrast (text-bg-light), Light Background Only (bg-light), Light Subtle (bg-light-subtle), Dark Contrast (text-bg-dark), Dark Background Only (bg-dark), Dark Subtle (bg-dark-subtle), Body (bg-body), Body Secondary (bg-body-secondary), Body Tertiary (bg-body-tertiary), White (bg-white), Transparent (bg-transparent) Default: "".
Back Opacity	Controls background opacity. Controls background opacity when using background color utilities. Applies classes like bg-opacity-25 , bg-opacity-50 , etc. Bootstrap docs: Background utilities Options: Default, 10% (bg-opacity-10), 25% (bg-opacity-25), 50% (bg-opacity-50), 75% (bg-opacity-75), 100% (bg-opacity-100) Default: "".
Width	Sets a Bootstrap width utility class. Sets a Bootstrap width utility class. Applies utilities like w-25 , w-50 , w-75 , w-100 , or w-auto . Bootstrap docs: Sizing Options: Auto (w-auto), 25% (w-25), 50% (w-50), 75% (w-75), 100% (w-100), Max 100% (mw-100) Default: "".
Height	Sets a Bootstrap height utility class. Sets a Bootstrap height utility class. Applies utilities like h-25 , h-50 , h-75 , h-100 , or h-auto . Bootstrap docs: Sizing Options: Auto (h-auto), 25% (h-25), 50% (h-50), 75% (h-75), 100% (h-100), Max 100% (mh-100) Default: "".
Opacity	Sets the opacity utility class. Sets an opacity utility class. Applies utilities such as opacity-25 , opacity-50 , opacity-75 , or opacity-100 . Bootstrap docs: Opacity Options: Default, 0% (opacity-0), 25% (opacity-25), 50% (opacity-50), 75% (opacity-75), 100% (opacity-100) Default: "".
Shadow	Applies a Bootstrap shadow utility. Applies a Bootstrap shadow utility. Uses classes like shadow , shadow-sm , shadow-lg , or removes shadow with shadow-none . Bootstrap docs: Shadows Options: Default, None (shadow-none), Small (shadow-sm), Regular (shadow), Large (shadow-lg) Default: "".
Object Fit	Options: Default, Contain (object-fit-contain), Cover (object-fit-cover), Fill (object-fit-fill), Scale Down (object-fit-scale), None (object-fit-none) Default: "".
Viewport Size	Options: Default, Width 100vw (vw-100), Min-Width 100vw (min-vw-100), Height 100vh (vh-100), Min-Height 100vh (min-vh-100) Default: "".
Placeholder	Placeholder styling utility. Controls placeholder-style appearance when supported by the rule/component. Use this for skeleton/loading placeholders or muted placeholder presentation depending on the component. Bootstrap docs: Placeholders Options: None, This Element (placeholder), Container Glow (placeholder-glow), Container Wave (placeholder-wave) Default: "".

Border

Name	Description
Border	Options: All (border), None (border-0), Top (border-top), End (border-end), Bottom (border-bottom), Start (border-start), No Top (border-top-0), No End (border-end-0), No Bottom (border-bottom-0), No Start (border-start-0) Default: "".
Width	Controls border width. Controls border width using Bootstrap border utilities. This applies classes like border , border-2 , border-3 , etc. Bootstrap docs: Border width Options: Default, 1px (border-1), 2px (border-2), 3px (border-3), 4px (border-4), 5px (border-5) Default: "".
Rounded	Options: Default, All (rounded), None (rounded-0), Top (rounded-top), End (rounded-end), Bottom (rounded-bottom), Start (rounded-start), Circle (rounded-circle), Pill (rounded-pill) Default: "".
Radius	Options: Default, Small (rounded-1), Medium (rounded-2), Large (rounded-3), X-Large (rounded-4), XX-Large (rounded-5) Default: "".
Border Color	Options: Default, Primary (border-primary), Primary Subtle (border-primary-subtle), Secondary (border-secondary), Secondary Subtle (border-secondary-subtle), Success (border-success), Success Subtle (border-success-subtle), Danger (border-danger), Danger Subtle (border-danger-subtle), Warning (border-warning), Warning Subtle (border-warning-subtle), Info (border-info), Info Subtle (border-info-subtle), Light (border-light), Light Subtle (border-light-subtle), Dark (border-dark), Dark Subtle (border-dark-subtle), Black (border-black), White (border-white) Default: "".

Spacing

Name	Description
Margin<br>&<br>Padding	Options: mt-0, mt-1, mt-2, mt-3, mt-4, mt-5, mt-n1, mt-n2, mt-n3, mt-n4, mt-n5, mt-auto, mb-0, mb-1, mb-2, mb-3, mb-4, mb-5, mb-n1, mb-n2, mb-n3, mb-n4, mb-n5, mb-auto, ms-0, ms-1, ms-2, ms-3, ms-4, ms-5, ms-n1, ms-n2, ms-n3, ms-n4, ms-n5, ms-auto, me-0, me-1, me-2, me-3, me-4, me-5, me-n1, me-n2, me-n3, me-n4, me-n5, me-auto, mx-0, mx-1, mx-2, mx-3, mx-4, mx-5, mx-n1, mx-n2, mx-n3, mx-n4, mx-n5, mx-auto, my-0, my-1, my-2, my-3, my-4, my-5, my-n1, my-n2, my-n3, my-n4, my-n5, my-auto, m-0, m-1, m-2, m-3, m-4, m-5, m-n1, m-n2, m-n3, m-n4, m-n5, m-auto, pt-0, pt-1, pt-2, pt-3, pt-4, pt-5, pb-0, pb-1, pb-2, pb-3, pb-4, pb-5, ps-0, ps-1, ps-2, ps-3, ps-4, ps-5, pe-0, pe-1, pe-2, pe-3, pe-4, pe-5, px-0, px-1, px-2, px-3, px-4, px-5, py-0, py-1, py-2, py-3, py-4, py-5, p-0, p-1, p-2, p-3, p-4, p-5
X Gutter	Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters Options: 0 (gx-0), 1 (gx-1), 2 (gx-2), 3 (gx-3), 4 (gx-4), 5 (gx-5) Default: "".
Y Gutter	Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters Options: 0 (gy-0), 1 (gy-1), 2 (gy-2), 3 (gy-3), 4 (gy-4), 5 (gy-5) Default: "".

Display

Name	Description
Hide on	Options: Hide on mobile (xs), Hide on landscape mobile (sm), Hide on tablet (md), Hide on laptop (lg), Hide on desktop (xl), Hide on extra wide (xxl)
Print	Options: Show (d-print-block), Hide (d-print-none)
Visually Hidden	Default: false.
Focusable	Default: false.

Dynamic attributes

Name	Description
Offcanvas Show	Choose dynamic data binding. Output value representing the shown state. This is typically used for App Connect state binding and logic, not for styling. Bootstrap docs: JavaScript

Dynamic events

Name	Description
Show	Action: Choose the action to execute. Output value representing the shown state. This is typically used for App Connect state binding and logic, not for styling. Bootstrap docs: JavaScript
Shown	Action: Choose the action to execute. Output value set after the component is fully shown (after animation completes if enabled). Use this when you need a “shown” signal that implies the UI is visible. Bootstrap docs: JavaScript
Hide	Action: Choose the action to execute. Output value representing the hidden state. This is typically used for App Connect state binding and logic. Bootstrap docs: JavaScript
Hidden	Action: Choose the action to execute. Output value set after the component is fully hidden (after animation completes if enabled). Use this as a reliable “hidden” signal for cleanup and follow-up actions. Bootstrap docs: JavaScript