Offcanvas Header Reference
Reference for Offcanvas Header Reference in Web Framework References. Key properties: ID, Class, Text, Advanced.
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
Offcanvas Header Properties
| Property | Type | Details |
|---|---|---|
| ID | text | ID for the offcanvas header. Sets the id attribute on the offcanvas header container. Useful as a stable selector or for accessibility wiring in custom layouts. Bootstrap docs: Offcanvas Attribute: id |
| Class | text | Extra classes for the offcanvas header. Adds extra CSS classes to the offcanvas header container. Use utilities (spacing/colors) or your own classes. Bootstrap docs: Utilities API Attribute: class |
| Text | text | Header title text. Sets the offcanvas header title text. Titles help communicate the purpose of the side panel. Bootstrap docs: Offcanvas Supports dynamic option sources. |
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 |
| button_group | ||
| Visually Hidden | boolean | |
| Focusable | boolean |