Skip to main content
All docs
V25.1
  • DxDrawer.PanelWidth Property

    Specifies the width of the drawer panel.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Parameter]
    public string PanelWidth { get; set; }

    Property Value

    Type Description
    String

    The width, in CSS units.

    Remarks

    Use the PanelWidth property to specify the width of the drawer panel.

    <DxDrawer @bind-IsOpen="IsOpen" 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>
    

    The default panel width is set in the CSS and equal to 15%.

    Important

    If you set the PanelWidth property to auto, fit-content, min-content, or max-content, drawer animation is disabled because of the transition CSS property limitations.

    See Also