Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxDrawer.Mode Property

Specifies how the drawer panel interacts with the target content area.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(DrawerMode.Shrink)]
[Parameter]
public DrawerMode Mode { get; set; }

#Property Value

Type Default Description
DrawerMode Shrink

The interaction mode.

Available values:

Name Description Image
Overlap

The drawer panel overlaps the target content area.

Shrink

The drawer panel shrinks the target content area.

#Remarks

Use the Mode property to define how the drawer interacts with the target content area in the opened state: overlaps or shrinks the content.

Run Demo: Drawer Position and Mode

The following modes are available.

#Overlap Mode

The drawer overlaps and greys out target content. You can use the ApplyBackgroundShading property to disable background shading.

razor
        <DxDrawer IsOpen="IsOpen" Mode="DrawerMode.Overlap" PanelWidth="20%">
            <BodyTemplate>
                <DxMenu Orientation="Orientation.Vertical">
                    <Items>
                        <DxMenuItem Text="Home" IconCssClass="menu-icon-home menu-icon" />
                        <DxMenuItem Text="Components" IconCssClass="menu-icon-products menu-icon" />
                        <DxMenuItem Text="Support" IconCssClass="menu-icon-support menu-icon" />
                        <DxMenuItem Text="Contacts" IconCssClass="menu-icon-contacts menu-icon" />
                        <DxMenuItem Text="About" IconCssClass="menu-icon-about menu-icon" />
                    </Items>
                </DxMenu>
            </BodyTemplate>
            <TargetContent>
                @* Lorem ipsum dolor sit amet, consectetur adipiscing elit ... *@
            </TargetContent>
        </DxDrawer>

#Shrink Mode

The default mode. The drawer shrinks target content.

See Also