New to KendoReact? Learn about KendoReact Free.

Items

Updated on Nov 11, 2026

The Menu items provide configuration options for their text, descriptions, URLs, icons, styles, and behavior.

To render the Menu items, either:

  • Use nested MenuItem components, or
  • Set the items Menu property.

To customize item content beyond these built-in options, see Menu Item Customization.

Setting Text

You can set the text of the Menu items by using the text property.

Example
View Source
Loading ...

Setting Descriptions

To display secondary text below an item label, set the description property. You can configure descriptions on nested MenuItem components or on objects passed to the Menu's items property.

The Menu does not automatically display descriptions when an item renderer (render or itemRender) or a linkRender replaces the default content. Include item.description in your custom renderer if needed.

The following example adds descriptions to the order workspace's Details and Activity menus. Open Order to explore them.

Example
View Source
Loading ...

Rendering URLs

You can set the URL of the items by using the url property. The URL will be rendered as a href attribute on the item link.

Example
View Source
Loading ...

Disabling Items

You can specify that a Menu item is disabled by using the disabled property.

Example
View Source
Loading ...

Showing Separator Items

You can specify a separator item by using the separator property.

Example
View Source
Loading ...

Defining Group Headers

To display a non-interactive label above related items, set the groupHeader property to true. Place the header and its related items as siblings inside a submenu.

tsx
<Menu>
  <MenuItem text="Reports">
    <MenuItem text="Sales" groupHeader={true} />
    <MenuItem text="Daily revenue" />
    <MenuItem text="Monthly revenue" />
  </MenuItem>
</Menu>

By default, a group header displays its text and optional icon. To customize its content, use a group header renderer.

The following example organizes a commerce dashboard's sales, inventory, and fulfillment reports under group headers. Open a department menu to see how headers label related reports.

Example
View Source
Loading ...

Displaying Icons

You can specify the name of a font icon that will be rendered for the item by using the icon property.

Example
View Source
Loading ...

Adding Styles and Classes

You can set styles and classes to the items by using the cssStyle and cssClass properties.

Example
View Source
Loading ...