Items
The Menu items provide configuration options for their text, descriptions, URLs, icons, styles, and behavior.
To render the Menu items, pass an array of MenuItemModel objects to the Menu's items property. Define child items through each object's items property.
To customize item content beyond these options, see Menu Item Customization.
Setting Text
You can set the text of the Menu items by using the text property.
Setting Descriptions
To display secondary text below an item label, set the description property on the item. You can set descriptions on nested items or on objects passed to the Menu's items property.
A custom item renderer (render or itemRender) or link renderer (linkRender) can replace the default content. Include props.item.description in the custom template when you want to display the description.
The following example adds descriptions to an order workspace's nested menus. Open Fulfillment to explore delivery options, then select a shipping or pickup method.
Rendering URLs
You can set the URL of the items by using the url property. The URL will be rendered as a href attribute on the item link.
Disabling Items
You can specify that a Menu item is disabled by using the disabled property.
Showing Separator Items
You can specify a separator item by using the separator property.
Defining Group Headers
To display a non-interactive label above related items, set the groupHeader property to true. Place the group header and its related items as siblings inside a submenu.
<Menu :items="[
{
text: 'Sales',
items: [
{ text: 'Revenue reports', groupHeader: true },
{ text: 'Daily revenue' },
{ text: 'Monthly revenue' }
]
}
]" />By default, a group header displays its text and optional icon. To customize its content, use a group header renderer.
The following example organizes a commerce dashboard's sales, inventory, and fulfillment reports with group headers and nested submenus.
Displaying Icons
You can specify the name of an SVG icon that will be rendered for the item by using the svgIcon property.
Adding Styles and Classes
You can set styles and classes to the items by using the cssStyle and cssClass properties.