• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Vue Wrappers End of Life
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UI
    • Data Tools
    • Date Inputs
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
      • Overview
      • Getting Started
      • ActionSheet
      • AppBar
      • Avatar
      • BottomNavigation
      • Card
      • ContextMenu
      • Drawer
      • ExpansionPanel
      • GridLayout
      • Menuupdated
      • PanelBar
      • Splitter
      • StackLayout
      • Stepper
      • TabStripupdated
      • TileLayout
      • Wizard
      • Globalization
      • API
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
New to Kendo UI for Vue? Start a free 30-day trial

MenuProps

The properties of the Kendo UI for Vue Menu component.

NameTypeDefaultDescription

className?

string

Adds a custom className to the Menu top element.

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.

dir?

string

Sets the direction of the Menu.

hoverCloseDelay?

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.

hoverOpenDelay?

number

Specifies the delay in milliseconds before the Menu items are opened on item mouse-hover (see example). Defaults to 100. If openOnClick is true, defaults to 0.

itemRender?

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.

items?

MenuItemModel[]

Sets the Menu items.

linkRender?

any

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.

onSelect?

(event: MenuSelectEvent) => void

Fires when a Menu item is selected.

openOnClick?

boolean

If openOnClick is set to true, the items are opened on mouse hover only after an initial click.

vertical?

boolean

Specifies whether the Menu will be vertical (see example).