Skip to main content
All docs
V26.1
  • Blazor Drawer

    • 2 minutes to read

    The DevExpress Drawer component 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.

    Read Tutorial: Explore Features Run Demo

    Blazor Drawer Overview

    Get Started Video

    API Reference

    Refer to the following list for the component API reference: DxDrawer Members.

    Features

    Flexible Visibility Modes

    You can implement a permanently visible, expandable, or responsive Drawer to adapt page layouts to different devices.

    Read Tutorial: Drawer Visibility

    Minimized Drawer

    Enable the MiniModeEnabled property to display a minimized panel when the full-size panel is closed. The mini panel allows you to save space yet enable single-click access to embedded commands.

    Read Tutorial: Minimized Drawer

    Left and Right Drawer Position

    The Position property allows you to display the Drawer panel at the left or right edge of the target content area.

    Read Tutorial: Drawer Position

    Overlap and Shrink Open Modes

    Use the Mode property to define how the Drawer interacts with the target content area in the opened state: overlaps or shrinks the content. In the Overlap mode, the Drawer overlaps and greys out target content. You can use the ApplyBackgroundShading property to disable background shading.

    Read Tutorial: Drawer Open Mode

    .NET 8 and .NET 9 Static Render Mode Support

    In static render mode, the DxDrawer component can be displayed as a permanently visible element or you can add query params or specify CSS rules to dynamically change drawer visibility.