New to KendoReact? Start a free 30-day trial

ContextMenuProps

Interface

The props of the KendoReact ContextMenu component.

Sets the ids of the Menu items that will not be closed on mouse-leave. The ids are hierarchical and zero-based. The first root item has a 0 id. If the first root item has children, the first child item acquires a 0_0 id and the second acquires a 0_1 id.

Example:

jsx

<Menu customCloseItemIds={['0', '0_1']} />

dir?

string

Sets the direction of the Menu.

Example:

jsx

<Menu dir="rtl" />

id?

string

Sets the ID of the Menu.

Example:

jsx

<Menu id="custom-menu" />

itemRender?

any

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.

Example:

jsx

const CustomItem = (props) => <div>{props.text}</div>;
<Menu itemRender={CustomItem} />

items?

MenuItemModel[]

Sets the Menu items.

Example:

jsx

const items = [{ text: 'Item 1' }, { text: 'Item 2' }];
<Menu items={items} />

linkRender?

any

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.

Example:

jsx

const CustomLink = (props) => <a href={props.href}>{props.text}</a>;
<Menu linkRender={CustomLink} />

offset

Offset

Specifies the absolute position of the ContextMenu. The Popover opens next to that point.

Example:

jsx

<ContextMenu offset={{ left: 100, top: 200 }} />

onClose

(event: MenuCloseEvent) => void

Triggers when the ContextMenu needs to hide.

Example:

jsx

<ContextMenu onClose={(e) => setShow(false)} />

Parameters:eventMenuCloseEvent

onSelect?

(event: MenuSelectEvent) => void

Fires when a Menu item is selected.

Parameters:eventMenuSelectEvent

Example:

jsx

<Menu onSelect={(event) => console.log(event.item.text)} />

show

boolean

Controls the Popup visibility of the ContextMenu.

Example:

jsx

<ContextMenu show={true} />

style?

CSSProperties

Sets additional CSS styles to the Menu.

Example:

jsx

<Menu style={{ backgroundColor: 'lightblue' }} />

vertical?

boolean

Specifies whether the Menu will be vertical (see example).

Default:

false

Example:

jsx

<Menu vertical />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.

ContextMenuProps

Definition

Properties

animate?

children?

className?

customCloseItemIds?

dir?

id?

itemRender?

items?

linkRender?

offset

onClose

onSelect?

show

style?

vertical?

webMcp?