Offcanvas Menu Reference
Reference for Offcanvas Menu Reference in Web Framework References. Key properties: ID, Class, Title, CTA.
Use this reference to understand what Offcanvas Menu Reference is for and which component-specific inspector group matters most when you configure it.
Inspector Property Groups
Offcanvas Menu
| 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 |
| Title | text | |
| CTA | text | |
| CTA href | text | Attribute: href |
| 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 (left), End (right), Top, Bottom |
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 |
Dynamic Attributes
Title
| Attribute property | Type | Details |
|---|---|---|
| Value | text | Choose dynamic data binding. |
CTA
| Attribute property | Type | Details |
|---|---|---|
| Value | text | Choose dynamic data binding. |
CTA href
| Attribute property | Type | Details |
|---|---|---|
| Value | text | Choose dynamic data binding. |