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 component also supports keyboard navigation. Press the Tab key or Shift+Tab to focus the menu and use Arrow keys to navigate through menu items.

Orientation and Display Mode


You can specify whether Menu arranges items vertically or horizontally (the Orientation property).

For each of these Orientation options, you can also choose between the following DisplayMode options:

  • Auto — adapts to the device.
  • Desktop — cascading menus. Root level items appear in a horizontal or vertical panel. In horizontal orientation, second-level menus drop down. In vertical orientation, second-level menus appear to the right or left side.
  • Mobile — a compact layout. In horizontal orientation, the component emulates a hamburger menu. In vertical orientation, root level items appear in the same way as in Desktop mode. The second-level menu appears within the same container (and includes a Back button).

In this demo, you can switch between display and orientation modes and review all available combinations.

Data Binding

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.

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:


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:

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

Note that individual templates override common templates.

The demo above demonstrates how to use templates to create the Search and User Profile menu items.