Dynamic Offcanvas: Reference

Add hidden sidebars for your website or app. Add hidden sidebars for your web sites and apps for navigation, shopping carts, and more which appear from the left, right, or bottom edge of the viewport. You can show and hide them using buttons, links or other elements on your page. Bootstrap 5 component. Add the component and configure its properties in the Inspector.

Inspector Property Groups

Dynamic Offcanvas Properties

Property	Type	Details
ID	text	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 Attribute: id
Class	text	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 Attribute: class
Placement	droplist	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, End, Bottom
Responsive	droplist	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, Responsive Small, Responsive Medium, Responsive Large, Responsive XLarge, Responsive XXLarge
Backdrop	droplist	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 Attribute: backdrop Options: Yes, No, Static
Scroll	boolean	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 Attribute: scroll

Text

Property	Type	Details
Advanced	css_toggle	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	color_group	Options: text-primary, text-primary-emphasis, text-secondary, text-secondary-emphasis, text-success, text-success-emphasis
Text Opacity	range
Align	button_group	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: text-start, text-center, text-end
Font Weight	button_group	Controls font weight. Controls font weight using Bootstrap font-weight utilities. Applies fw-light , fw-normal , fw-bold , etc. Bootstrap docs: Font weight Options: B, B+, N, L, L+
Line Height	button_group	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, SM, BS, LG

Appearance

Property	Type	Details
Back Color	color_group	Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle
Back Opacity	range	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
Width	range	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
Height	range	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
Opacity	range	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
Shadow	droplist	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, Small, Regular, Large

Border

Property	Type	Details
Border	enum	Options: All, None, Top, End, Bottom, Start
Width	range	Controls border width. Controls border width using Bootstrap border utilities. This applies classes like border , border-2 , border-3 , etc. Bootstrap docs: Border width
Rounded	droplist	Options: Default, All, None, Top, End, Bottom
Radius	droplist	Options: Default, Small, Medium, Large, X-Large, XX-Large
Border Color	colorlist	Options: Default, Primary, Primary Subtle, Secondary, Secondary Subtle, Success

Spacing

Property	Type	Details
Margin<br>&<br>Padding	spacing
X Gutter	range	Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters
Y Gutter	range	Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters

Display

Property	Type	Details
Hide on	button_group	Options: xs, sm, md, lg, xl, xxl
Print	button_group
Visually Hidden	boolean
Focusable	boolean

Actions

Show

Show the Offcanvas

Hide

Hide the Offcanvas

Toggle

Toggle the Offcanvas

Dynamic Attributes

Offcanvas Show

Fires before the offcanvas starts to show.

Attribute property	Type	Details
When:	text	Choose dynamic data binding.

Dynamic Events

Show

Fires before the offcanvas starts to show.

Event option	Type	Details
Action:	text	Choose the action to execute.

Shown

Fires after the offcanvas is shown.

Event option	Type	Details
Action:	text	Choose the action to execute.

Hide

Fires before the offcanvas starts to hide.

Event option	Type	Details
Action:	text	Choose the action to execute.

Hidden

Fires after the offcanvas is hidden.

Event option	Type	Details
Action:	text	Choose the action to execute.