Blazor Menu

Matjaz Reberc

created 4 days ago (modified 4 days ago)

Hello!

Is it possible to create nav menu with more then one column of items?

I tried with row and col but it didn't work,

C#
<DxMenu CollapseItemsToHamburgerMenu="true">
    <Items>
        <DxMenuItem Text="Domov" NavigateUrl="/" />
        <DxMenuItem Text="Vrtni center" IconCssClass="menu-icon-home menu-icon">
            <Items>
                <div class="row">
                    <div class="col">
                        <DxMenuItem Text="Our Mission" />
                        <DxMenuItem Text="Our Customers" />
                    </div>
                    <div class="col">
                        <DxMenuItem Text="Our " />
                        <DxMenuItem Text="Our " />
                    </div>
                    <div class="col">
                        <DxMenuItem Text=" Mission" />
                        <DxMenuItem Text=" Customers" />
                    </div>
                </div>
            </Items>
        </DxMenuItem>
    </Items>
</DxMenu>

Thank you, Matjaz

SubmenuItems.png

Answers approved by DevExpress Support

Gian Pascual (DevExpress Support)

created 2 days ago

Hi,

To display multiple columns of items in a DxMenuItem dropdown, you can use the DxMenuItem SubMenuTemplate property. You can use the DxGridLayout component inside the template to arrange the menu items in multiple columns.

Razor
<DxMenu CollapseItemsToHamburgerMenu="true">
    <Items>
        <DxMenuItem Text="Domov" NavigateUrl="/" />
        <DxMenuItem Text="Vrtni center" IconCssClass="menu-icon-home menu-icon">
            <SubMenuTemplate>
                <DxGridLayout>
                    <Rows>
                        <DxGridLayoutRow></DxGridLayoutRow>
                    </Rows>
                    <Columns>
                        <DxGridLayoutColumn Width="120px"></DxGridLayoutColumn>
                        <DxGridLayoutColumn Width="100px"></DxGridLayoutColumn>
                        <DxGridLayoutColumn Width="100px"></DxGridLayoutColumn>
                    </Columns>
                    <Items>
                        <DxGridLayoutItem Row="0" Column="0">
                            <Template>
                                <DxMenu Orientation="Orientation.Vertical">
                                    <Items>
                                        <DxMenuItem Text="Our Mission" />
                                        <DxMenuItem Text="Our Customers" />
                                    </Items>
                                </DxMenu>
                            </Template>
                        </DxGridLayoutItem>
                        <DxGridLayoutItem Row="0" Column="1">
                            <Template>
                                <DxMenu Orientation="Orientation.Vertical">
                                    <Items>
                                        <DxMenuItem Text="Our " />
                                        <DxMenuItem Text="Our " />
                                    </Items>
                                </DxMenu>
                            </Template>
                        </DxGridLayoutItem>
                        <DxGridLayoutItem Row="0" Column="2">
                            <Template>
                                <DxMenu Orientation="Orientation.Vertical">
                                    <Items>
                                        <DxMenuItem Text="Our " />
                                        <DxMenuItem Text="Our " />
                                    </Items>
                                </DxMenu>
                            </Template>
                        </DxGridLayoutItem>
                    </Items>
                </DxGridLayout>
            </SubMenuTemplate>
        </DxMenuItem>
    </Items>
</DxMenu>

Let me know if you need further assistance.

Regards,
Gian

Clipboard-File-1.png

Comments (2)

Matjaz Reberc 2 days ago

Hello Gian!

Thank you for your help,

I am new to DevExpress.

I now have to figure out how to change layout on mobile screen.

Thank you, Matjaz

image.png

Gian Pascual (DevExpress Support) a day ago

You are welcome.

If you need further assistance, feel free to contact us.

Regards,
Gian

Blazor Menu

Answers approved by DevExpress Support

Recently viewed tickets