# MenuItem Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)`` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/MenuItem/index.ts#L63 The MenuItem is a selectable option that is appended to a [Menu](https://api.playcanvas.com/pcui/classes/Menu.md). A MenuItem can also contain child MenuItems (by appending them to the MenuItem). This can be useful to show nested Menus. ## Constructors ### constructor ```ts new MenuItem(args?: Readonly) ``` Creates a new MenuItem. **Parameters** - `args` (`Readonly<`[`MenuItemArgs`](https://api.playcanvas.com/pcui/interfaces/MenuItemArgs.md)`>`, optional, default `{}`): The arguments. ## Properties ### onIsEnabled ```ts onIsEnabled: () => boolean ``` The function that determines whether the MenuItem should be enabled when the Menu is shown. ### onIsVisible ```ts onIsVisible: () => boolean ``` The function that determines whether the MenuItem should be visible when the Menu is shown. ### onSelect ```ts onSelect: (evt?: MouseEvent) => void ``` The function called when the MenuItem is selected. ## Accessors ### binding ```ts get binding(): BindingBase set binding(value: BindingBase) ``` Gets the binding for the MenuItem label. ### hasChildren ```ts get hasChildren(): boolean ``` Returns whether the MenuItem has children. ### icon ```ts get icon(): string set icon(value: string) ``` Gets the CSS code for an icon for the MenuItem. ### menu ```ts get menu(): Menu set menu(value: Menu) ``` Gets the menu. ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Sets whether the input should flash on changes. ### shortcut ```ts get shortcut(): string set shortcut(value: string) ``` Gets the keyboard shortcut displayed on the MenuItem. ### text ```ts get text(): string set text(value: string) ``` Gets the text shown on the MenuItem. ### value ```ts get value(): string set value(value: string) ``` Sets the value of the Element. ### values ```ts set values(values: string[]) ``` Sets multiple values on the Element. It is up to the Element to determine how to display them. ## Methods ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers and paths to the Element's data binding. **Parameters** - `observers` (`Observer | Observer[]`): An array of observers or a single observer. - `paths` (`string | string[]`): A path for the observer(s) or an array of paths that maps to each separate observer. ### select ```ts select(): void ``` Selects the MenuItem which also happens automatically when the user clicks on the MenuItem. ### unlink ```ts unlink(): void ``` Unlinks the Element from its observers. ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'`