Bootstrap Offcanvas component (aka Drawer).


IsOpen: False

Custom close-button icon


Choose the placement of the Offcanvas by setting the Placement parameter.


By default backdrop is enabled, you can disable it using the BackdropEnabled parameter.


Set the size of the HxOffcanvas with the Size parameter. The default value is OffcanvasSize.Regular.

IsOpen: False

IsOpen: False



Name Type Description
Title string Text for the title in header. (Is rendered into <h5 class="offcanvas-title"> - in opposite to HeaderTemplate which is rendered directly into offcanvas-header).
HeaderTemplate RenderFragment Content for the header. (Is rendered directly into offcanvas-header - in opposite to Title which is rendered into <h5 class="offcanvas-title">).
BodyTemplate RenderFragment Body content.
FooterTemplate RenderFragment Footer content.
Placement OffcanvasPlacement Placement of the offcanvas. Default is OffcanvasPlacement.End (right).
RenderMode OffcanvasRenderMode Determines whether the content is always rendered or only if the offcanvas is open. Default is OffcanvasRenderMode.OpenOnly.
Size OffcanvasSize Size of the offcanvas. Default is OffcanvasSize.Regular.
ShowCloseButton bool? Indicates whether the modal shows close button in header. Default value is true. Use CloseButtonIcon to change shape of the button.
CloseOnEscape bool Indicates whether the offcanvas closes when escape key is pressed. Default value is true.
CloseButtonIcon IconBase Close icon to be used in header. If set to null, Bootstrap default close-button will be used.
BackdropEnabled bool? Indicates whether to apply a backdrop on body while offcanvas is open. Default value (from HxOffcanvas.Defaults) is true.
ScrollingEnabled bool Indicates whether body (page) scrolling is allowed while offcanvas is open. Default value (from HxOffcanvas.Defaults) is false.
CssClass string Offcanvas additional CSS class. Added to root div (.offcanvas).
HeaderCssClass string Additional header CSS class.
BodyCssClass string Additional body CSS class.
FooterCssClass string Additional footer CSS class.

Event Callbacks

Name Type Description
OnClosed EventCallback Raised when the offcanvas is closed (whatever reason there is).


Method Returns Description
ShowAsync() Task Shows the offcanvas.
HideAsync() Task Hides the offcanvas.

Static properties

Property Type Description
Defaults OffcanvasDefaults Application-wide defaults for the HxOffcanvas.

CSS Variables

Name Description Default
--hx-offcanvas-close-icon-font-size Offcanvas close icon font size. 2rem
An unhandled error has occurred. Reload 🗙