ContextQMD
Back to Devexpress

DxMenu Class

blazor-devexpress-dot-blazor-e4c68088.md

latest29.8 KB
Original Source

DxMenu Class

An adaptive menu component.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
public class DxMenu :
    DxComponent,
    IRequireSelfCascading,
    IModelWrapper<IMenuModel>

Remarks

<DxMenu> adds a menu to your Blazor application.

Run Demo

YouTube video

Add Menu to a Project

To add a <DxMenu> component to an application, follow the steps below:

  1. Create a Blazor Server or Blazor WebAssembly application.
  2. Add the <DxMenu>…</DxMenu> markup to your application.
  3. Configure the component: add items, change the orientation, specify display mode, and so on (see the sections below).

API Reference

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

Static Render Mode Specifics

In static render mode, you can use a single-level menu.

razor
<DxMenu Orientation="@Orientation.Vertical">
    <Items>
        <DxMenuItem NavigateUrl="/" Text="Home" />
        <DxMenuItem NavigateUrl="/counter" Text="Counter" />
        <DxMenuItem NavigateUrl="/weather" Text="Weather" />
    </Items>
</DxMenu>

If you need interactivity (for example, to support adaptivity), enable interactive render mode. Refer to the following topic for more details: Enable Interactive Render Mode.

Items

Specify menu items in the DxMenu.Items collection. Each item is a DxMenuItem class instance that can have a collection of child items (the DxMenuItem.Items property).

Use the ItemsPosition property to align items in the menu. To customize item content and appearance, use the Text, IconCssClass, DxMenu.SubMenuCssClass, and DxMenuItem.SubMenuCssClass properties. To add a separator before an item, use the BeginGroup property.

You can also use the Expanded property to show a drop-down window with child items. Note that a node is visible only when all its parent nodes are visible.

razor
<div class="card">
    <DxMenu Title="DevExpress"
            ItemsPosition="ItemPosition.Start">
        <Items>
            <DxMenuItem Text="Products" IconCssClass="oi oi-layers" Expanded="true">
                <Items>
                    <DxMenuItem Text="Subscriptions / Packs" />
                    <DxMenuItem Text=".NET Windows Forms Components" />
                    <DxMenuItem Text="Reporting / Printing Suites" />
                    <DxMenuItem Text="VCL Components and Tools" />
                    <DxMenuItem Text="ASP.NET Components" />
                </Items>
            </DxMenuItem>
            <DxMenuItem Text="Support" IconCssClass="oi oi-person">
                <Items>
                    <DxMenuItem Text="Knowledge Base" />
                    <DxMenuItem Text="Documentation" />
                    <DxMenuItem Text="Support Center" />
                    <DxMenuItem Text="Newsgroups" />
                    <DxMenuItem Text="Best Practices" />
                </Items>
            </DxMenuItem>
            <DxMenuItem Text="Documentation" IconCssClass="oi oi-book" BeginGroup="true" />
            <DxMenuItem Text="Demos" IconCssClass="oi oi-monitor" />
            <DxMenuItem Text="Blogs" IconCssClass="oi oi-bell" />
        </Items>
    </DxMenu>
</div>

Run Demo: Menu - Overview

Data Binding

You can populate the Menu component with items from a data source.

Follow the steps below to bind Menu to data:

  1. Use the Data property to specify a data source. You can use different collection types:

  2. Add the DataMappings tag to the component’s markup.

  3. Create the DxMenuDataMapping instance and map item properties (BeginGroup, CssClass, and so on) to data source fields. Mappings are used to assign data from the source collection to the component’s data model.

The following code snippet loads menu items from the TextFormattingMenu class. Each menu item has child items. The code specifies the Children and Text mappings to adjust the menu data model to the specified data source.

razor
<div class="card menu-card-container w-100">
    <div class="card-header p-0 fw-normal">
        <DxMenu ItemClick="@(e => ((TextFormattingMenuItem)e.ItemInfo.Data).Click())"
                Data="@MenuItems"
                SizeMode="@Params.SizeMode">
            <DataMappings>
                <DxMenuDataMapping Text="Text"
                                   Children="Children"
                                   BeginGroup="BeginGroup"
                                   CssClass="CssClass"
                                   Enabled="Enabled" />
            </DataMappings>
        </DxMenu>
    </div>
    <div class="card-body">
        <div class="menu-card-text-container">
            <span class="demo-preventsel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</span>
        </div>
    </div>
</div>

@code {
    List<TextFormattingMenuItem> menuItems;
    List<TextFormattingMenuItem> MenuItems => menuItems = menuItems ?? TextFormattingMenu.MenuItems(Formatting);
    TextFormatting Formatting { get; } = new TextFormatting();
}
csharp
using System.Collections.Generic;
using System.Linq;

namespace BlazorDemo.Data {
    public class TextFormatting {
        public Dictionary<string, bool> Decoration { get; } = new Dictionary<string, bool>() {
            { "Bold", false },
            { "Italic" , false },
            { "Underline" , false },
            { "Strikethrough" , false },
            { "Overline" , false }
        };

        public string FontFamily { get; set; }
        public int FontSize { get; set; }
        public string TextCase { get; set; }
        string GetTextDecoration() {
            string textDecoration = "";
            if(Decoration["Underline"])
                textDecoration += "underline";
            if(Decoration["Overline"])
                textDecoration += " overline";
            if(Decoration["Strikethrough"])
                textDecoration += " line-through";
            return textDecoration;
        }
        public string GetStyleString() {
            string style = "";
            if(!string.IsNullOrEmpty(FontFamily))
                style += $"font-family: {FontFamily}; ";
            if(FontSize > 0)
                style += $"font-size: {FontSize}pt; ";
            if(Decoration["Bold"])
                style += "font-weight: bold; ";
            if(Decoration["Italic"])
                style += "font-style: italic; ";
            if(!string.IsNullOrEmpty(TextCase))
                style += $"text-transform: {TextCase}; ";
            string textDecoration = GetTextDecoration();
            if(!string.IsNullOrEmpty(textDecoration))
                style += $"text-decoration: {textDecoration};";
            return !string.IsNullOrEmpty(style) ? style : null;
        }
        public bool IsStyleChanged() {
            return TextCase != null || FontFamily != null || FontSize != 0 || Decoration.Values.Any(x => x);
        }
        public void ClearFormatting() {
            TextCase = null;
            FontFamily = null;
            FontSize = 0;
            Decoration["Bold"] = false;
            Decoration["Italic"] = false;
            Decoration["Underline"] = false;
            Decoration["Overline"] = false;
            Decoration["Strikethrough"] = false;
        }
    }
}
csharp
using System.Collections.Generic;

namespace BlazorDemo.Data {
    static class TextFormattingMenu {
        public static TextFormattingMenuItem FontFamilyMenuItem(TextFormatting textFormatting) =>
            new TextFormattingParentMenuItem(textFormatting, "Font", new List<TextFormattingMenuItem>() {
                new FontFamilyMenuItem(textFormatting, "Times New Roman", "Times New Roman"),
                new FontFamilyMenuItem(textFormatting, "Tahoma", "Tahoma"),
                new FontFamilyMenuItem(textFormatting, "Verdana", "Verdana"),
                new FontFamilyMenuItem(textFormatting, "Arial", "Arial"),
                new FontFamilyMenuItem(textFormatting, "MS Sans Serif", "MS Sans Serif"),
                new FontFamilyMenuItem(textFormatting, "Courier", "Courier"),
                new FontFamilyMenuItem(textFormatting, "Segoe UI", "Segoe UI"),
                new FontFamilyMenuItem(textFormatting, "Default", null) { BeginGroup = true, IconCss = "menu-icon menu-icon-check" }
            });
        public static TextFormattingMenuItem FontSizeMenuItem(TextFormatting textFormatting) =>
            new TextFormattingParentMenuItem(textFormatting, "Size", new List<TextFormattingMenuItem>() {
                new FontSizeMenuItem(textFormatting, "8pt", 8),
                new FontSizeMenuItem(textFormatting, "10pt", 10),
                new FontSizeMenuItem(textFormatting, "12pt", 12),
                new FontSizeMenuItem(textFormatting, "14pt", 14),
                new FontSizeMenuItem(textFormatting, "18pt", 18),
                new FontSizeMenuItem(textFormatting, "24pt", 24),
                new FontSizeMenuItem(textFormatting, "36pt", 36),
                new FontSizeMenuItem(textFormatting, "Default", 0) { BeginGroup = true }
            });
            // ...
        public static List<TextFormattingMenuItem> MenuItems(TextFormatting textFormatting) =>
            new List<TextFormattingMenuItem>() {
                FontFamilyMenuItem(textFormatting),
                FontSizeMenuItem(textFormatting),
                new ClearFormattingMenuItem(textFormatting) { BeginGroup = false }
            };
    }
}

Run Demo: Menu - Data Binding

YouTube video

Orientation

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

Display Modes

The Menu component supports different display modes (the DisplayMode property):

  • Auto - the menu is adapted to the device type.

  • Desktop - the menu is shown as a panel with root items. The menu view also depends on the orientation. In the horizontal orientation, child items are available in drop-down menus. In the vertical orientation, submenus with child items are shown to the side of the menu container.

  • Mobile - the menu has a compact view and depends on the orientation. In the horizontal orientation, it is a hamburger menu. In the vertical orientation, the menu looks like a desktop menu - a panel with root items, but submenus are shown in the main menu container and have the Back button.

The following code snippet specifies display mode:

razor
<div>
    <DxMenu Title="DevExpress"
            Orientation="Orientation.Vertical"
            DisplayMode="MenuDisplayMode.Mobile">
        <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>

Adaptivity

The Menu component supports adaptive mode when items are arranged horizontally. The following properties specify how the menu behaves when the width of the browser window changes and it cannot fit all items:

CollapseItemToIconModeSpecifies whether the menu displays icons instead of captions in items. You can also specify the order in which menu hides its items (AdaptivePriority).CollapseItemsToHamburgerMenuSpecifies whether menu items are collapsed into a hamburger menu. Use the HamburgerButtonPosition property to specify the hamburger button’s position.

razor
<div class="card w-auto">
    <DxMenu Title="DevExpress"
            CollapseItemToIconMode="MenuCollapseItemToIconMode.Sequentially"
            CollapseItemsToHamburgerMenu="true">
        <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>
            <DxMenuItem Text="Contacts" IconCssClass="menu-icon-contacts menu-icon" />
            <DxMenuItem Text="About" IconCssClass="menu-icon-about menu-icon" />
        </Items>
    </DxMenu>
</div>

Run Demo: Menu - Adaptivity

YouTube video

You can also use the DisplayMode property in Auto mode to show the Menu as a panel or in a compact view depending on the device type.

Templates

The Menu component allows you to use templates to customize the layout and appearance of the menu title and menu items.

Title Template

Use the TitleTemplate property to specify the template for the menu title.

razor
<div class="card w-50">
    <DxMenu Title="DevExpress Logo">
        <TitleTemplate>
            
        </TitleTemplate>
        <Items>
            <DxMenuItem Text="Products" />
            <DxMenuItem Text="Support" />
            <DxMenuItem Text="Documentation" />
            <DxMenuItem Text="Demos" />
        </Items>
    </DxMenu>
</div>

Item Templates

You can specify a template for all items or for an individual item. Individual templates override common templates.

What to CustomizeCommon TemplatesIndividual Templates
A whole itemDxMenu.ItemTemplateDxMenuItem.Template
An item’s textDxMenu.ItemTextTemplateDxMenuItem.TextTemplate
An item’s submenuDxMenu.SubMenuTemplateDxMenuItem.SubMenuTemplate

The following example uses templates to create the Search and User Profile menu items:

razor
<DxMenu Orientation="Orientation.Horizontal"
@* ... *@
        SubMenuCssClass="menu-dropdown"
        SizeMode="@Params.SizeMode">
    <TitleTemplate>
        <div class="icon-logo" role="img" aria-label="@context"></div>
    </TitleTemplate>

    <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>
        <DxMenuItem CssClass="search-menu-item" Position="ItemPosition.End">
            <Template>
                <DxSearchBox CssClass="search" aria-label="Search" />
            </Template>
        </DxMenuItem>
        <DxMenuItem CssClass="notoggle" Position="ItemPosition.End">
            <TextTemplate>
                <div class="menu-icon-person-circle menu-icon" />
            </TextTemplate>
            <SubMenuTemplate>
                <div class="w-100 user-profile">
                    <div class="flex-column align-items-center justify-content-center">
                        <div class="logo-container d-flex align-items-center justify-content-center">
                            <div class="menu-icon-person-circle menu-icon menu-icon-large" />
                        </div>
                        <div class="user-name-container bm-3 mb-2">
                            <div class="tm-8 text-center">User Name</div>
                            <div class="text-center">John Heart</div>
                        </div>
                        <div class="d-flex justify-content-center log-off-btn">
                            <DxButton Text="Log Off" RenderStyle="@ButtonRenderStyle.Secondary"></DxButton>
                        </div>
                    </div>
                </div>
            </SubMenuTemplate>
        </DxMenuItem>
    </Items>
</DxMenu>
razor
.dxbl-menu-item .search {
    min-width: 123px
}

.dxbl-menu-item-tmpl > .search {
    position: relative;
}

.user-profile .logo-container {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.user-profile .log-off-btn {
    padding-top: 0.815rem;
    padding-bottom: 0.815rem;
    border-top: 1px solid #e5e5e5;
}

.menu-icon-user-profile {
    opacity: 0.75;
}

.user-profile .menu-icon-user-profile {
    opacity: 0.25;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.user-name-container .tm-8 {
    opacity: 0.8;
}

Run Demo: Menu - Templates

Keyboard Navigation

The DevExpress Blazor Menu component supports keyboard shortcuts that allow users to access every UI element and navigate through menu and submenu items. Keyboard navigation is implemented both on the client and server.

Note

Keyboard support allows users to interact with application content in cases they cannot use a mouse or they rely on assistive technologies (like screen readers or switch devices). Refer to the Accessibility help topic for information on other accessibility areas that we address.

The table below lists common keyboard shortcuts:

Shortcut KeysDescription
Tab, Shift + TabFocuses the menu/hamburger button or moves focus to the next or previous focusable page element.
Enter, SpaceFor items without child items: Invokes a click event handler for the focused menu item, closes submenus, and moves focus to the corresponding main menu item.
For items with child items: Invokes a click event handler for the focused menu item, opens a submenu, and moves focus to its first item. For templated items: Moves focus to the first focusable element within the template.
Esc, TabFor templates within menu items: Moves focus to the corresponding menu item.

The following sections describe keyboard shortcuts available in different menu display and orientation modes.

Desktop Horizontal Menu

Shortcut KeysDescription
EndMoves focus to the last menu/submenu item.
HomeMoves focus to the first menu/submenu item.
EscCloses opened submenus and moves focus to the corresponding main menu item.
Up ArrowFor main menu items with child items: Opens a submenu and moves focus to its last item.
For submenu items: Moves focus to the previous item.
Down ArrowFor main menu items with child items: Opens a submenu and moves focus to its first item.
For submenu items: Moves focus to the next item.
Right ArrowFor main menu items: Moves focus to the next item.
For submenu items with child items: Opens a submenu and moves focus to its first item. For submenu items without child items: Closes submenus, moves focus to the next main menu item, and opens its submenu.
Left ArrowFor main menu items: Moves focus to the previous menu item.
For the first level submenu items: Closes the submenu, moves focus to the previous main menu item, and opens its submenu. For another level submenu items: Closes the current level submenu and moves focus to the corresponding parent item.

Desktop Vertical Menu

Shortcut KeysDescription
EndMoves focus to the last menu/submenu item.
HomeMoves focus to the first menu/submenu item.
EscCloses opened submenus and moves focus to the corresponding main menu item.
Up ArrowMoves focus to the previous menu item.
Down ArrowMoves focus to the next menu item.
Left ArrowFor main menu items with child items: Opens a submenu and moves focus to its last item.
For submenu items: Closes the submenu and moves focus to the corresponding parent item.
Right ArrowFor items with child items: Opens a submenu and moves focus to its first item.

Mobile Vertical Menu

Shortcut KeysDescription
Down ArrowMoves focus to the next menu item.
Up ArrowMoves focus to the previous menu item.
Right ArrowFor items with child items: Opens a submenu.
Left ArrowFor main menu items with child items: Opens a submenu and moves focus to its last item.
For submenu items: Closes the submenu and moves focus to the corresponding parent item.

Mobile Horizontal Menu

Shortcut KeysDescription
Down ArrowFor the hamburger button: Opens the main menu and moves focus to its first item.
For menu items: Moves focus to the next item without expanding/collapsing an item.
Up ArrowFor the hamburger button: Opens the main menu and moves focus to its last item.
For menu items: Moves focus to the previous item without expanding/collapsing an item.
Right ArrowExpands the focused collapsed item or moves focus to the first child item.
Left ArrowCollapses the focused expanded item or moves focus to the corresponding parent item.
HomeMoves focus to the first item in the tree without expanding/collapsing an item.
EndMoves focus to the last item in the tree without expanding/collapsing an item.
EscCloses the menu and moves focus to the hamburger button.

Run Demo: Menu

Troubleshooting

If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

Implements

IHandleEvent

IHandleAfterRender

IAsyncDisposable

IComponent

Inheritance

Object ComponentBase DxComponentBase DevExpress.Blazor.Base.DxAsyncDisposableComponent DevExpress.Blazor.Base.DxDecoratedComponent DxComponent DxMenu

See Also

DxMenu Members

DevExpress.Blazor Namespace