New to KendoReact? Start a free 30-day trial

MenuItemModel

Interface

The interface for describing items that can be passed to the items property of the Menu as an alternative to passing them as children.

Definition

Package:@progress/kendo-react-layout

Properties

Renders non-interactive trailing content for root and popup items. Overrides the Menu-level actionsRender; not rendered for separators, group headers, or items with linkRender.

Example:
tsx
const CopyShortcut = () => <kbd>Ctrl+C</kbd>;
<Menu items={[{ text: 'Copy', actionsRender: CopyShortcut }]} />

A React functional or class component which is used for rendering content instead of the item children (see example).

cssClass?

string

The additional CSS classes that will be rendered on the item (see example).

cssStyle?

CSSProperties

The CSS styles that will be rendered on the item (see example).

Represents any additional data that is associated with the Menu item.

Sets secondary text below the item text on root and popup items. Not rendered when a custom item renderer (render or itemRender) or link renderer (linkRender) is used. actionsRender alone does not suppress it.

Example:
tsx
<Menu items={[{ text: 'Copy', description: 'Copy the selected text' }]} />

disabled?

boolean

Specifies if the item is disabled (see example).

Marks the item as a non-focusable header for following items. Displays the item's icon or svgIcon and text by default; use groupHeaderRender to customize it. separator takes precedence if both flags are set.

Example:
tsx
<Menu items={[{ text: 'Recent files', groupHeader: true }, { text: 'Report.pdf' }]} />

Renders custom content in a group header, replacing its default icon and text. Receives the original item and its hierarchical itemId.

Example:
tsx
const Header = ({ item }: MenuItemGroupHeaderRenderProps) => <strong>{item.text}</strong>;
<Menu items={[{ text: 'Recent files', groupHeader: true, groupHeaderRender: Header }]} />

icon?

string

Specifies the name of the font icon that will be rendered for the item (see example).

Specifies the children of the item.

A React functional or class component which is used for rendering the link of the item (see example). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.

name?

string

Specifies name of the item.

A React functional or class component which is used for rendering the innermost part of the Menu item (see example). By default, the innermost item part includes only the text for the item.

separator?

boolean

Specifies if this is a separator item. If set to true only the cssClass and cssStyle props should be rendered along.

svgIcon?

SVGIcon

Specifies the SVG icon that will be rendered for the item (see example).

text?

string

Specifies the item text (see example).

url?

string

Specifies a URL which is rendered as a href attribute on the item link (see example).