# Menu Item Customization The Menu enables you to override the default rendering of its items. To customize the item rendering, use any of the following approaches: * [Override the rendering of the innermost item part](https://www.telerik.com/kendo-react-ui/components/layout/menu/rendering#items) * [Override the rendering of the item link](https://www.telerik.com/kendo-react-ui/components/layout/menu/rendering#links) * [Add trailing item actions](https://www.telerik.com/kendo-react-ui/components/layout/menu/rendering#item-actions) * [Customize group headers](https://www.telerik.com/kendo-react-ui/components/layout/menu/rendering#group-headers) * [Set specific content for the item children](https://www.telerik.com/kendo-react-ui/components/layout/menu/rendering#content) ## Items By default, the innermost Menu item part displays the item text. If an item has a [`description`](https://www.telerik.com/kendo-react-ui/components/layout/menu/items#setting-descriptions), the Menu also displays secondary text below its label. To override the rendering of that innermost item part, either: * Override the innermost part for a specific item by using the [`render`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#render) property. [Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/item-render/func/source.txt) * Override the innermost part for all items by using the [`itemRender`](https://www.telerik.com/kendo-react-ui/components/layout/api/menuprops#itemrender) property of the Menu. [Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/menu-item-render/func/source.txt) ## Links By default, the Menu item link includes its configured icon, text, description, trailing actions, and submenu arrow. To override the rendering of the item link, either: * Override the item link for a specific item by using the [`linkRender`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#linkrender) property. [Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/link-render/func/source.txt) * Override the item link for all items by using the [`linkRender`](https://www.telerik.com/kendo-react-ui/components/layout/api/menuprops#linkrender) property of the Menu. [Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/menu-link-render/func/source.txt) ## Item Actions To add non-interactive trailing content after the item text, use [ `actionsRender`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#actionsrender). It is suitable for keyboard shortcut hints, badges, or status indicators, but not for focusable controls. The renderer receives [`MenuItemActionsRenderProps`](https://www.telerik.com/kendo-react-ui/components/layout/api/menuitemactionsrenderprops) with two properties, `item` and `itemId`. You can set [`actionsRender`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#actionsrender) at two levels: * **Menu**—Use the same renderer for all items. * **Individual item**—Set `actionsRender` on a `MenuItem` component or a `MenuItemModel` object to override the Menu's renderer. Set it to `null` to hide actions for that item. The following example displays live order counts as badges on the **Orders** and **Fulfillment** items. Only these two items set `actionsRender`. [Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/actions-render/source.txt) ## Group Headers To replace the default icon and text of a [group header](https://www.telerik.com/kendo-react-ui/components/layout/menu/items#defining-group-headers), set the item's [ `groupHeaderRender`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#groupheaderrender) property. Use it on a `MenuItem` component or a `MenuItemModel` object with `groupHeader` property set to `true`. The renderer receives [`MenuItemGroupHeaderRenderProps`](https://www.telerik.com/kendo-react-ui/components/layout/api/menuitemgroupheaderrenderprops), which exposes the original `item` and its hierarchical, zero-based `itemId`. The following example adds folder icons to the **Warehouse reports** and **Delivery Reports** group headers in an operations menu. [Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/group-header-render/source.txt) ## Content A content renderer replaces the child items of a Menu item. Instead of a submenu list, the item opens a popup with your own content, so it suits richer panels such as a catalog overview. Set it by using the [`contentRender`](https://www.telerik.com/kendo-react-ui/components/layout/api/basemenuitem#contentrender) property. The following example sets `contentRender` on the **Products** item. The renderer receives the original item through the `item` property and displays its child items as a catalog panel. The **Solutions** item has no `contentRender`, so it opens a regular submenu. [Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/content-render/func/source.txt) If a component that is rendered inside the content utilizes a popup that is rendered outside the content, the Menu closes the item as soon as the user hovers over the popup. Even if the popup is rendered inside the content, it may still overflow, which will cause the mouse to leave the Menu when the popup is closed. To avoid the accidental closing of content items: 1. Set the `ids` of the content items to the [`customCloseItemIds`](https://www.telerik.com/kendo-react-ui/components/layout/api/menuprops#customcloseitemids) property of the Menu. 2. Provide a **Close** button. [Demo Source](https://demos.telerik.com/kendo-react-ui/layout/menu/content-render-with-popup/func/source.txt) ## Suggested Links * [Learn about KendoReact Free.](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) * [Items](https://www.telerik.com/kendo-react-ui/components/layout/menu/items) * [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)