Back to Devexpress

DxMenu.Orientation Property

blazor-devexpress-dot-blazor-dot-dxmenu-c1e02b42.md

latest2.9 KB
Original Source

DxMenu.Orientation Property

Specifies whether items are arranged vertically or horizontally.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(Orientation.Horizontal)]
[Parameter]
public Orientation Orientation { get; set; }

Property Value

TypeDefaultDescription
OrientationHorizontal

An Orientation enumeration value.

|

Available values:

NameDescription
Horizontal

Sets horizontal orientation.

| | Vertical |

Sets vertical orientation.

|

Remarks

The Menu’s default orientation is Horizontal (menu items are arranged in a row). Use the Orientation property to change the orientation.

razor
<div>
    <DxMenu Title="DevExpress"
            Orientation="Orientation.Vertical"
            DisplayMode="MenuDisplayMode.Desktop">
        <Items>
            <DxMenuItem Text="Home" IconCssClass="menu-icon-home menu-icon">
                <Items>
                    <DxMenuItem Text="News">
                        <Items>
                            <DxMenuItem Text="Explore our newest features" />
                            <DxMenuItem Text="Website news" />
                        </Items>
                    </DxMenuItem>
                    <DxMenuItem Text="Our Mission" />
                    <DxMenuItem Text="Our Customers" />
                </Items>
            </DxMenuItem>
            <DxMenuItem Text="Components" IconCssClass="menu-icon-products menu-icon">
                <Items>
                    <DxMenuItem Text="Blazor" />
                    <DxMenuItem Text="ASP.NET MVC" />
                    <DxMenuItem Text="ASP.NET Web Forms" />
                    <DxMenuItem Text="ASP.NET Core" />
                    <DxMenuItem Text="Bootstrap Web Forms" />
                </Items>
            </DxMenuItem>
            <DxMenuItem Text="Support" IconCssClass="menu-icon-support menu-icon">
                <Items>
                    <DxMenuItem Text="Getting Started" />
                    <DxMenuItem Text="Documentation" />
                    <DxMenuItem Text="Support Center" />
                    <DxMenuItem Text="Code Examples" />
                    <DxMenuItem Text="Blogs" />
                </Items>
            </DxMenuItem>
        </Items>
    </DxMenu>
</div>

Run Demo: Menu - Orientation

YouTube video

See Also

DxMenu Class

DxMenu Members

DevExpress.Blazor Namespace