# Items

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

To render the Menu items, either:

* Use nested [`MenuItem`](https://www.telerik.com/kendo-react-ui/components/layout/api/menuitem) components, or
* Set the [`items`](https://www.telerik.com/kendo-react-ui/components/layout/api/menuprops#items) Menu property.

To customize item content beyond these built-in options, see [Menu Item Customization](https://www.telerik.com/kendo-react-ui/components/layout/menu/rendering).

## Setting Text

You can set the text of the Menu items by using the [`text`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#text) property.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/items/properties/text/func/source.txt)

## Setting Descriptions

To display secondary text below an item label, set the [ `description`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#description) property. You can configure descriptions on nested `MenuItem` components or on objects passed to the Menu's [`items`](https://www.telerik.com/kendo-react-ui/components/layout/api/menuprops#items) property.

The Menu does not automatically display descriptions when an item renderer ([`render`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#render) or [`itemRender`](https://www.telerik.com/kendo-react-ui/components/layout/api/menuprops#itemrender)) or a [`linkRender`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/items/properties/description/source.txt)

## Rendering URLs

You can set the URL of the items by using the [`url`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#url) property. The URL will be rendered as a `href` attribute on the item link.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/items/properties/url/func/source.txt)

## Disabling Items

You can specify that a Menu item is disabled by using the [`disabled`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#disabled) property.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/items/properties/disabled/func/source.txt)

## Showing Separator Items

You can specify a separator item by using the [`separator`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#separator) property.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/items/separator/source.txt)

## Defining Group Headers

To display a non-interactive label above related items, set the [ `groupHeader`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#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](https://www.telerik.com/kendo-react-ui/components/layout/menu/rendering#group-headers).

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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/items/properties/group-header/source.txt)

## Displaying Icons

You can specify the name of a [font icon](https://www.telerik.com/kendo-react-ui/components/styling/icons#Icons-List) that will be rendered for the item by using the [`icon`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#icon) property.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/items/properties/icon/func/source.txt)

## Adding Styles and Classes

You can set styles and classes to the items by using the [`cssStyle`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#cssstyle) and [`cssClass`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#cssclass) properties.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/items/properties/styles/func/source.txt)

## Suggested Links

* [Learn about KendoReact Free.](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium)

* [Menu Item Customization](https://www.telerik.com/kendo-react-ui/components/layout/menu/rendering)

* [API Reference of the Menu](https://www.telerik.com/kendo-react-ui/components/layout/api/menuprops)

* [API Reference of the MenuItem](https://www.telerik.com/kendo-react-ui/components/layout/api/menuitemprops)

* [API Reference of the MenuItemModel](https://www.telerik.com/kendo-react-ui/components/layout/api/menuitemmodel)