@progress/kendo-react-layout/menu/MenuProps.d.ts

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { MenuItemModel } from './models/MenuItemModel';
import { MenuSelectEvent, MenuCloseEvent } from './events';
import { PopupAnimation } from '@progress/kendo-react-popup';
import { WebMcpProps } from '@progress/kendo-react-common';
/**
 * The properties of the [KendoReact Menu component](https://www.telerik.com/kendo-react-ui/components/layout/menu).
 */
export interface MenuProps {
    /**
     * Specifies whether the Menu will be vertical
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/vertical)).
     *
     * @example
     * ```jsx
     * <Menu vertical />
     * ```
     *
     * @default false
     */
    vertical?: boolean;
    /**
     * Sets the Menu items.
     *
     * @example
     * ```jsx
     * const items = [{ text: 'Item 1' }, { text: 'Item 2' }];
     * <Menu items={items} />
     * ```
     */
    items?: MenuItemModel[];
    /**
     * Sets the Menu items declaratively.
     *
     * @example
     * ```jsx
     * <Menu>
     *   <MenuItem text="Item 1" />
     *   <MenuItem text="Item 2" />
     * </Menu>
     * ```
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the Menu.
     *
     * @example
     * ```jsx
     * <Menu style={{ backgroundColor: 'lightblue' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets the ID of the Menu.
     *
     * @example
     * ```jsx
     * <Menu id="custom-menu" />
     * ```
     */
    id?: string;
    /**
     * Controls the Popup animation.
     *
     * @example
     * ```jsx
     * <Menu animate={{ openDuration: 200, closeDuration: 200 }} />
     * ```
     *
     * @default true
     */
    animate?: boolean | PopupAnimation;
    /**
     * Sets the direction of the Menu.
     *
     * @example
     * ```jsx
     * <Menu dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Specifies the delay in milliseconds before the Menu items are closed on
     * item mouse-leave ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/open-close#toc-delay-on-hover)).
     * Used to avoid accidental closure on leaving.
     *
     * @example
     * ```jsx
     * <Menu hoverOpenDelay={200} />
     * ```
     *
     * @default 100
     */
    hoverOpenDelay?: number;
    /**
     * Specifies the delay in milliseconds before the Menu items are closed on item mouse-leave
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/open-close#toc-delay-on-hover)).
     *
     * @example
     * ```jsx
     * <Menu hoverCloseDelay={200} />
     * ```
     *
     * @default 100
     */
    hoverCloseDelay?: number;
    /**
     * If `openOnClick` is set to `true`, the items are opened on mouse hover only after an initial click.
     *
     * @example
     * ```jsx
     * <Menu openOnClick />
     * ```
     *
     * @default false
     */
    openOnClick?: boolean;
    /**
     * A React functional or class component which is used for rendering the innermost part of
     * the Menu item ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/items/rendering#toc-items)).
     * 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} />
     * ```
     */
    itemRender?: any;
    /**
     * A React functional or class component which is used for rendering the link of the item
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/menu/items/rendering#toc-links)).
     * 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} />
     * ```
     */
    linkRender?: any;
    /**
     * 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']} />
     * ```
     */
    customCloseItemIds?: string[];
    /**
     * Adds a custom className to the Menu top element.
     *
     * @example
     * ```jsx
     * <Menu className="custom-menu" />
     * ```
     */
    className?: string;
    /**
     * @hidden
     *
     * @remarks
     * This property is related to accessibility.
     */
    role?: string;
    /**
     * Fires when a Menu item is selected.
     *
     * @example
     * ```jsx
     * <Menu onSelect={(event) => console.log(event.item.text)} />
     * ```
     */
    onSelect?: (event: MenuSelectEvent) => void;
    /**
     * Fires when a Menu item is closed.
     *
     * @example
     * ```jsx
     * <Menu onClose={(event) => console.log('Item closed:', event.item.text)} />
     * ```
     */
    onClose?: (event: MenuCloseEvent) => void;
    /**
     * Enables Web MCP tool registration for this component.
     * Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
     */
    webMcp?: boolean | WebMcpProps;
}