DxDrawer Class

A side panel that supports minimized layout and expand/collapse operations.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxDrawer :
    DxSizableComponentBase

Remarks

The DevExpress Drawer for Blazor (<DxDrawer>) allows you to add a side panel to your application. Use this panel to host navigation controls or display additional information about the current view.

Run Demo

Add a Drawer to a Project

Follow the steps below to add the Drawer component to an application:

1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
2. Add the <DxDrawer>…</DxDrawer> markup to a .razor file.
3. Add drawer panel content in the BodyTemplate markup. For instance, you can add a DxMenu component to implement a navigation side panel.
4. Optional. Define the drawer’s HeaderTemplate and FooterTemplate.
5. Specify the component’s target content (TargetContent).
6. Write code that manages the Drawer’s visibility.

Component Structure

The DxDrawer component consists of a drawer panel and a target content area. The drawer panel can include header, body, and footer. If a header or footer is not specified, the body occupies the free space.

<DxDrawer IsOpen="true" >
    <HeaderTemplate>Header Template</HeaderTemplate>
    <BodyTemplate>Body Template</BodyTemplate>
    <FooterTemplate>Footer Template</FooterTemplate>
    <TargetContent>Target Content</TargetContent>
</DxDrawer>

Drawer Visibility

The DxDrawer component allows you to implement different visibility scenarios.

Permanently Visible Drawer

Set the IsOpen property to true to display the drawer permanently.

<DxDrawer IsOpen="true" PanelWidth="20%">
    ...
</DxDrawer>

Expandable Drawer

1. Add an element that toggles drawer visibility.
2. Implement two-way binding for the IsOpen property to show the drawer in code.

<DxButton Click="OnClick" IconCssClass="tb-icon icon-hamburger" 
    RenderStyleMode="ButtonRenderStyleMode.Outline" />

<DxDrawer @bind-IsOpen="IsOpen" PanelWidth="20%">
    ...
</DxDrawer>

@code {
    bool IsOpen { get; set; } = true;
    void OnClick() {
        IsOpen = !IsOpen;
    }
}

Minimized Drawer

Enable the MiniModeEnabled property to change drawer width instead of closing. Use the MiniPanelWidth property to specify the width of the minimized panel.

Run Demo: Responsive Drawer

Responsive Drawer

Combine DxDrawer and DxLayoutBreakpoint components to adapt page layout to different devices. For instance, you can use the XSmall breakpoint to change drawer settings for small screens.

Run Demo: Responsive Drawer

<DxLayoutBreakpoint DeviceSize="DeviceSize.XSmall" IsActive="isXSmallScreen" IsActiveChanged="IsActiveChanged" />
<DxButton Click="OnClick" IconCssClass="tb-icon icon-hamburger" />

<DxDrawer IsOpen="IsOpen" PanelWidth="180px">
    ...
</DxDrawer>
@code {
    bool isXSmallScreen;
    bool? isOpen;
    bool IsOpen {
        // Initially hide Drawer on small screens and show on large screens.
        get => isOpen ?? !isXSmallScreen;
        set => isOpen = value;
    }
    // Apply Overlap mode on small screens and Shrink mode on large screens.
    DrawerMode Mode => isXSmallScreen ? DrawerMode.Overlap : DrawerMode.Shrink;

    void IsActiveChanged(bool isActive) {
        isXSmallScreen = isActive;
        isOpen = null;
    }
    void OnClick() {
        IsOpen = !IsOpen;
    }
}

.NET 8 Specifics

• In Static render mode, you can use a permanently visible drawer.

• To expand or collapse the DxDrawer panel on a static page, you need to implement additional code. A possible solution is to update navigation buttons so that they use parameters. In this case, you need to obtain the DxDrawer’s IsOpen property from the url parameters.

• If you specify interactive render mode for the DxDrawer component, it causes the following error: Cannot pass the parameter 'X' to component 'Y' with rendermode 'InteractiveServerRenderMode'. The reason is that an interactive component cannot contain non-serializable parameters, such as render fragments. If you need interactivity, enable interactive render mode for a parent component that has no non-serializable parameters or make the entire application interactive.

Drawer Position

Use the Position property to specify the drawer position relative to the target content.

Run Demo: Drawer Position and Mode

<DxDrawer IsOpen="IsOpen" Position="DrawerPosition.Right" 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>

Drawer Open Mode

When the drawer panel opens, it can overlap or shrink target content. Use the Mode property to specify how the panel interacts with the target content area.

Run Demo: Drawer - Position and Mode

<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>

Drawer Appearance

The DxDrawer component allows you to customize its appearance with the following properties:

CssClass

Specifies the name of the CSS class applied to the Drawer component.

ClosedCssClass

Specifies the name of the CSS class applied to the Drawer component when the panel is closed.

MiniCssClass

Specifies the name of the CSS class applied to the Drawer component when the panel is minimized.

OpenCssClass

Specifies the name of the CSS class applied to the Drawer component when the panel is open.

Implements

IComponent

IHandleEvent

IHandleAfterRender

Inheritance

Object

ComponentBase

DxSizableComponentBase

DxDrawer