MenuProps

The properties of the KendoReact Menu component.

Name	Type	Default	Description
animate?	boolean | PopupAnimation		Controls the Popup animation. jsx <Menu animate={{ openDuration: 200, closeDuration: 200 }} />
children?	React.ReactNode		Sets the Menu items declaratively. jsx <Menu> <MenuItem text="Item 1" /> <MenuItem text="Item 2" /> </Menu>
className?	string		Adds a custom className to the Menu top element. jsx <Menu className="custom-menu" />
customCloseItemIds?	string[]		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. jsx <Menu customCloseItemIds={['0', '0_1']} />
dir?	string		Sets the direction of the Menu. jsx <Menu dir="rtl" />
hoverCloseDelay?	number		Specifies the delay in milliseconds before the Menu items are closed on item mouse-leave (see example). jsx <Menu hoverCloseDelay={200} />
hoverOpenDelay?	number		Specifies the delay in milliseconds before the Menu items are closed on item mouse-leave (see example). Used to avoid accidental closure on leaving. Defaults to 100. jsx <Menu hoverOpenDelay={200} />
id?	string		Sets the ID of the Menu. 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. jsx const CustomItem = (props) => <div>{props.text}</div>; <Menu itemRender={CustomItem} />
items?	MenuItemModel[]		Sets the Menu items. 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. jsx const CustomLink = (props) => <a href={props.href}>{props.text}</a>; <Menu linkRender={CustomLink} />
onSelect?	(event: MenuSelectEvent) => void		Fires when a Menu item is selected. jsx <Menu onSelect={(event) => console.log(event.item.text)} />
openOnClick?	boolean		If openOnClick is set to true, the items are opened on mouse hover only after an initial click. jsx <Menu openOnClick />
style?	React.CSSProperties		Sets additional CSS styles to the Menu. jsx <Menu style={{ backgroundColor: 'lightblue' }} />
vertical?	boolean		Specifies whether the Menu will be vertical (see example). jsx <Menu vertical />