Version: 5.x


A multi-purpose interactable element inside a menu. The behaviour and style of the item depends on the props set.

  • Default: By default, the menu item only contains a label and optional hint/badge text that is displayed on the right-hand side of the item.
  • Navigation: If the menu prop is set, the item behaves as a navigational control and displays arrows to indicate whether clicking the control will navigate forwards/backwards.
  • Radio: If the checked prop is set, the item behaves as a radio button and displays a checkmark icon to indicate whether it is checked or not.


Vime settings menu item component


<!-- ... -->
<!-- ... -->
<vm-menu-item label="Playback Quality" hint="Auto"></vm-menu-item>


badgeThis can provide additional context about the value of a menu item. For example, if the item is a radio button for a set of video qualities, the badge could describe whether the quality is UHD, HD etc.string ∣ undefinedundefined
checkIconThe name of the checkmark icon to resolve from the icon library.string ∣ undefined'check'
checkedIf this item is to behave as a radio button, then this property determines whether the radio is selected or not. Sets the aria-checked property.boolean ∣ undefinedundefined
expandedIf the item has a popup menu, this indicates whether the menu is open or not. Sets the aria-expanded property.boolean ∣ undefinedundefined
hiddenWhether the item is displayed or not.booleanfalse
hintThis can provide additional context about some underlying state of the item. For example, if the menu item opens/closes a submenu with options, the hint could be the currently selected option.string ∣ undefinedundefined
iconsThe name of an icon library to use. Defaults to the library defined by the icons player property.string ∣ undefinedundefined
identifierThe id attribute of the item.string ∣ undefinedundefined
label (required)The label/title of the item.stringundefined
menuIf the item has a popup menu, then this should be a reference to it.HTMLVmMenuElement ∣ undefinedundefined


blurItemRemoves focus from the menu item.blurItem() => Promise<void>
focusItemFocuses the menu item.focusItem() => Promise<void>
getHeightReturns the height of the menu item.getHeight() => Promise<number>


vmBlurEmitted when the item loses focus.CustomEvent<void>
vmFocusEmitted when the item is focused.CustomEvent<void>

CSS Custom Properties#

--vm-menu-item-arrow-colorThe color of the left/right arrow on a navigational menu item.
--vm-menu-item-badge-bgThe background color of the badge.
--vm-menu-item-badge-colorThe color of the badge text.
--vm-menu-item-badge-font-sizeThe font size of the the badge text.
--vm-menu-item-check-icon-sizeThe width of the checked icon.
--vm-menu-item-divider-colorThe color of the divider between a navigational menu item and the menu body.
--vm-menu-item-focus-bgThe background color of a menu item when it is being focused or hovered on.
--vm-menu-item-focus-colorThe color of a menu item's text when it is being focused or hovered on.
--vm-menu-item-hint-colorThe color of the hint text.
--vm-menu-item-hint-font-sizeThe font size of the hint text.
--vm-menu-item-hint-opacityThe opacity of the hint text.
--vm-menu-item-paddingThe padding within each menu item.
--vm-menu-item-tap-highlightThe highlight color when a menu item is tapped.


Used by#

Depends on#