Menu Item Customization
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
- Add trailing item actions
- Customize group headers
- Set specific content for the item children
Items
By default, the innermost Menu item part displays the item text. If an item has a description, the Menu also displays secondary text below its label.
To override the rendering of that innermost item part, either:
- Override the innermost part for a specific item by using the
renderproperty.
- Override the innermost part for all items by using the
itemRenderproperty of the Menu.
Links
By default, the Menu item link can include its configured icon, text, description, trailing actions, and submenu arrow.
To override the rendering of the item link, either:
- Override the item link for a specific item by using the
linkRenderproperty.
- Override the item link for all items by using the
linkRenderproperty of the Menu.
Item Actions
To add non-interactive trailing content before an item's submenu arrow, use actionsRender. It is suitable for keyboard shortcut hints, badges, or status indicators, but not for focusable controls. The renderer receives the original item and its hierarchical, zero-based itemId through the slot props.
Set actionsRender on the Menu to use the same renderer for all items. To customize one item, set actionsRender on its MenuItemModel object; the item-level renderer overrides the Menu-level renderer.
A custom link renderer replaces the full item link, so it does not automatically include the actions content. Add the actions markup to the custom template when needed.
The following example displays live order counts across nested review, fulfillment, and history menus.
Group Headers
To replace the default text and icon of a group header, set the item's groupHeaderRender property. Set groupHeader to true on the same item. The renderer receives the original item and its hierarchical, zero-based itemId through the slot props.
The following example adds folder icons and reporting periods to custom group headers in nested finance and operations menus.
Content
You can set specific content that will replace the children of a Menu item by using the contentRender property.