Overriding the Default Rendering
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
- Override the rendering of the item link
- Set specific content for the item children
Items
By default, the innermost Menu item part includes only text.
To override the rendering of that innermost item part, either:
- Override the innermost part for a specific item by using the
render
property.
- Override the innermost part for all items by using the
itemRender
property of the Menu.
Links
By default, the Menu item link includes an icon, text, and an arrow.
To override the rendering of the item link, either:
- Override the item link for a specific item by using the
linkRender
property.
- Override the item link for all items by using the
linkRender
property of the Menu.
Content
You can set specific content that will replace the children of a Menu item by using the contentRender
property.
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:
- Set the
ids
of the content items to thecustomCloseItemIds
property of the Menu. - Provide a Close button.