Version: 5.x
vm-menu-item
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.
#
Visual
#
Usage- HTML
- React
- Vue
- Svelte
- Stencil
- Angular
example.vue
example.svelte
example.html
#
PropertiesProperty | Description | Type | Default |
---|---|---|---|
badge | This 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 ∣ undefined | undefined |
checkIcon | The name of the checkmark icon to resolve from the icon library. | string ∣ undefined | 'check' |
checked | If 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 ∣ undefined | undefined |
expanded | If the item has a popup menu, this indicates whether the menu is open or not. Sets the aria-expanded property. | boolean ∣ undefined | undefined |
hidden | Whether the item is displayed or not. | boolean | false |
hint | This 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 ∣ undefined | undefined |
icons | The name of an icon library to use. Defaults to the library defined by the icons player property. | string ∣ undefined | undefined |
identifier | The id attribute of the item. | string ∣ undefined | undefined |
label (required) | The label/title of the item. | string | undefined |
menu | If the item has a popup menu, then this should be a reference to it. | HTMLVmMenuElement ∣ undefined | undefined |
#
MethodsMethod | Description | Signature |
---|---|---|
blurItem | Removes focus from the menu item. | blurItem() => Promise<void> |
focusItem | Focuses the menu item. | focusItem() => Promise<void> |
getHeight | Returns the height of the menu item. | getHeight() => Promise<number> |
#
EventsEvent | Description | Type |
---|---|---|
vmBlur | Emitted when the item loses focus. | CustomEvent<void> |
vmFocus | Emitted when the item is focused. | CustomEvent<void> |
#
CSS Custom PropertiesName | Description |
---|---|
--vm-menu-item-arrow-color | The color of the left/right arrow on a navigational menu item. |
--vm-menu-item-badge-bg | The background color of the badge. |
--vm-menu-item-badge-color | The color of the badge text. |
--vm-menu-item-badge-font-size | The font size of the the badge text. |
--vm-menu-item-check-icon-size | The width of the checked icon. |
--vm-menu-item-divider-color | The color of the divider between a navigational menu item and the menu body. |
--vm-menu-item-focus-bg | The background color of a menu item when it is being focused or hovered on. |
--vm-menu-item-focus-color | The color of a menu item's text when it is being focused or hovered on. |
--vm-menu-item-hint-color | The color of the hint text. |
--vm-menu-item-hint-font-size | The font size of the hint text. |
--vm-menu-item-hint-opacity | The opacity of the hint text. |
--vm-menu-item-padding | The padding within each menu item. |
--vm-menu-item-tap-highlight | The highlight color when a menu item is tapped. |