New to Kendo UI for Vue? Start a free 30-day trial

BaseMenuItem

Interface

An interface which holds the shared properties of the MenuItemModel and the MenuItem components.

Properties

actionsRender?

any

Specifies a component, render function, or slot name for item-specific trailing actions before the expand arrow. Receives { item, itemId } and overrides the Menu-level actionsRender.

Example:

vue

<Menu :items="[{ text: 'Copy', actionsRender: 'copyActions' }]">
    <template #copyActions><kbd>Ctrl+C</kbd></template>
</Menu>

contentRender?

any

A Vue functional or class component which is used for rendering content instead of the item children (see example).

cssClass?

string

The additional CSS classes that will be rendered on the item (see example).

cssStyle?

any

The CSS styles that will be rendered on the item (see example).

data?

any

Represents any additional data that is associated with the Menu item.

description?

string

Specifies secondary text below the item text. It wraps without truncation, is independent of actionsRender, and is ignored for group headers and separators.

Example:

vue

<Menu :items="[{ text: 'Copy', description: 'Copy the selection' }]" />

disabled?

boolean

Specifies if the item is disabled (see example).

groupHeader?

boolean

Specifies whether this item is a non-interactive group header for following items.

Example:

vue

<Menu :items="[{ text: 'File', items: [{ text: 'Recent', groupHeader: true }, { text: 'Doc 1' }] }]" />

groupHeaderRender?

any

Specifies a component, render function, or slot name for custom group-header content. Receives the original item and its itemId.

icon?

string

Specifies the name of the FontIcon that will be rendered for the item).

A Vue 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.

popupClass?

string

The additional CSS classes that will be rendered on the item's popup.

render?

any

A Vue 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.

separator?

boolean

Specifies if this is a separator item. If set to true only the cssClass and cssStyle props should be rendered along.

svgIcon?

SVGIcon

Specifies the name of the SVGIcon that will be rendered for the item).

text?

string

Specifies the item text (see example).

url?

string

Specifies a URL which is rendered as a href attribute on the item link (see example).

BaseMenuItem

Definition

Properties

actionsRender?

contentRender?

cssClass?

cssStyle?

data?

description?

disabled?

groupHeader?

groupHeaderRender?

icon?

linkRender?

popupClass?

render?

separator?

svgIcon?

text?

url?