blazor-devexpress-dot-blazor-dot-dxdrawer-939efe68.md
Specifies where the drawer panel is displayed – to the left or right of the target content.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[DefaultValue(DrawerPosition.Left)]
[Parameter]
public DrawerPosition Position { get; set; }
| Type | Default | Description |
|---|---|---|
| DrawerPosition | Left |
The drawer panel position.
|
Available values:
| Name | Description | Image |
|---|---|---|
| Left |
Displays the drawer panel at the left edge of the target content area.
|
| | Right |
Displays the drawer panel at the right edge of the target content area.
|
|
The DxDrawer component can display its panel to the left or right of the target content. Use the Position property to specify the drawer panel position.
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>
See Also