Skip to main content
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 identifer="menu-id" controller="menu-controller-id" active>
<!-- ... -->


activeWhether the menu is open/visible.booleanfalse
controllerReference to the controller DOM element that is responsible for opening/closing this menu.HTMLElement ∣ undefinedundefined
identifier (required)The id attribute of the menu.stringundefined
slideInDirectionThe direction the menu should slide in from."left" ∣ "right" ∣ undefinedundefined


blurMenuRemoves focus from the menu.blurMenu() => Promise<void>
calculateHeightCalculates the height of the settings menu based on its children.calculateHeight() => Promise<number>
focusMenuFocuses the menu.focusMenu() => Promise<void>
getActiveMenuItemReturns the currently focused menu item.getActiveMenuItem() => Promise<HTMLVmMenuItemElement ∣ undefined>
setActiveMenuItemSets the currently focused menu item.setActiveMenuItem(item?: HTMLVmMenuItemElement ∣ undefined) => Promise<void>


vmActiveMenuItemChangeEmitted when the currently focused menu item changes.CustomEvent<HTMLVmMenuItemElement ∣ undefined>
vmActiveSubmenuChangeEmitted when the active submenu changes.CustomEvent<HTMLVmSubmenuElement ∣ undefined>
vmBlurEmitted when the menu loses focus.CustomEvent<void>
vmCloseEmitted when the menu has closed/is not active.CustomEvent<HTMLVmMenuElement>
vmFocusEmitted when the menu is focused.CustomEvent<void>
vmMenuHeightChangeEmitted when the height of the menu changes.CustomEvent<number>
vmOpenEmitted when the menu is open/active.CustomEvent<HTMLVmMenuElement>


Used to pass in the body of the menu which usually contains menu items, radio groups and/or submenus.

CSS Custom Properties#

--vm-menu-bgThe background color the menu.
--vm-menu-colorThe text color within the menu.
--vm-menu-font-sizeThe font size of text within the menu.
--vm-menu-font-weightThe font weight of text within the menu.
--vm-menu-transitionThe CSS transitions applied to the menu.
--vm-menu-z-indexThe position in the UI z-axis stack inside the player.


Used by#