# Items

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

To render the Menu items, pass an array of [`MenuItemModel`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/menuitemmodel) objects to the Menu's [`items`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/menuprops#items) property. Define child items through each object's `items` property.

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

## Setting Text

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

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

## Setting Descriptions

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

A custom item renderer ([`render`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/menuitemmodel#render) or [`itemRender`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/menuprops#itemrender)) or link renderer ([`linkRender`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/menuitemmodel#linkrender)) can replace the default content. Include `props.item.description` in the custom template when you want to display the description.

The following example adds descriptions to an order workspace's nested menus. Open **Fulfillment** to explore delivery options, then select a shipping or pickup method.

[Demo Source](https://demos.telerik.com/kendo-vue-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-vue-ui-develop/components/layout/api/menuitemmodel#url) property. The URL will be rendered as a `href` attribute on the item link.

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

## Disabling Items

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

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

## Showing Separator Items

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

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

## Defining Group Headers

To display a non-interactive label above related items, set the [`groupHeader`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/menuitemmodel#groupheader) property to `true`. Place the group header and its related items as siblings inside a submenu.

```vue
<Menu :items="[
    {
        text: 'Sales',
        items: [
            { text: 'Revenue reports', groupHeader: true },
            { text: 'Daily revenue' },
            { text: 'Monthly revenue' }
        ]
    }
]" />
```

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-vue-ui-develop/components/layout/menu/rendering#group-headers).

The following example organizes a commerce dashboard's sales, inventory, and fulfillment reports with group headers and nested submenus.

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

## Displaying Icons

You can specify the name of an [SVG icon](https://www.telerik.com/kendo-vue-ui-develop/components/icons/svgicon/svgicon-list#svg-icons-list) that will be rendered for the item by using the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/menuitemmodel#svgicon) property.

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

## Adding Styles and Classes

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

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

## Suggested Links

* [Data Binding](https://www.telerik.com/kendo-vue-ui-develop/components/layout/menu/data-binding)
* [Overriding the Default Rendering](https://www.telerik.com/kendo-vue-ui-develop/components/layout/menu/rendering)
* [API Reference of the Menu](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/menuprops)