Our Blazor Menu component allows you to add an adaptive menu to your Blazor application. Menu items are stored in the Items collection. Each item is a DxMenuItem object that can display text, an icon, or both. Use the ItemsPosition and ItemsStretched properties to align items in the menu and stretch them.

Menu items can help you organize navigation. Use the item's NavigateUrl and Target properties to specify the navigation location and where to open it (in the same or new tab).

To customize item content and appearance, use the Text, IconCssClass, and CssClass properties. You can also disable the component.

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

This demo demonstrates how to create a vertical menu. You can also choose the Desktop or Mobile display mode. View the Display Mode demo for more information about these 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.

This demo demonstrates how to create a horizontal menu for mobile devices.

The DevExpress Menu component allows you to load data from a data source to create menu items. Follow the steps below to bind the Menu to data:

1. Use the Menu's Data property to specify a data source.
2. Add the <DataMappings> tag to the component markup.
3. In the <DataMappings> tags, create the DxMenuDataMapping instance and map item properties to data source fields. Mappings are used to adjust the Menu's data model to the data source. For flat data, the Key and the ParentKey property is required. For hierarchical data, the Children property is required.

The Menu component supports adaptive mode. The following properties specify how the menu responds when the width of the browser window changes and there is not enough space to display all the items:

• CollapseItemToIconMode - Specifies whether the menu hides item text and displays icons instead. You can also use the AdaptivePriority property to specify the order in which menu items are hidden.

• CollapseItemsToHamburgerMenu - Specifies whether menu items are collapsed into a hamburger menu. You can use the HamburgerButtonPosition property to specify the hamburger button's position.

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

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

Use the following properties to specify common templates for all items:

• DxMenu.ItemTemplate
• DxMenu.ItemTextTemplate
• DxMenu.SubMenuTemplate

Use the following properties to specify templates for an individual item:

• DxMenuItem.Template
• DxMenuItem.TextTemplate
• DxMenuItem.SubMenuTemplate

Note that individual templates override common templates.

The following example demonstrates how to use templates to create the Search and User Profile menu items.