Menu Item | Calcite Design System | Esri Developer

Child component of Menu

Overview

Menu Item components represent an option a user can select from a Menu. Through the use of text and iconography, Menu Item components can convey a current location or target destination within an application.

API reference

Properties

Property	Attribute	Description	Type	Default
active	active	When `true`, the component is highlighted.	`boolean`	`false`
breadcrumb	breadcrumb	When `true`, the component displays a breadcrumb trail for use as a navigational aid.	`boolean`	`false`
href	href	Specifies the URL destination of the component, which can be set as an absolute or relative path.	`string \| undefined`
iconEnd	icon-end	Specifies an icon to display at the end of the component.	`IconName \| undefined`
iconFlipRtl	icon-flip-rtl	Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).	`FlipContext \| undefined`
iconStart	icon-start	Specifies an icon to display at the start of the component.	`IconName \| undefined`
labelrequired	label	Specifies an accessible label for the component.	`string`
messageOverrides		Replace localized message strings with your own strings. Note: Individual message keys may change between releases.	`Record<string, unknown> \| undefined`
open	open	When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.	`boolean`	`false`
rel	rel	Defines the relationship between the `href` value and the current document.	`string \| undefined`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
target	target	Specifies where to open the linked document defined in the `href` property.	`string \| undefined`
text	text	Specifies the text to display.	`string \| undefined`

Slots

Name	Description
submenu-item	A slot for adding `calcite-menu-item`s in a submenu.

Styles

Name	Description
--calcite-menu-item-accent-color	When `active`, specifies the component's border color.
--calcite-menu-background-color	Specifies the component's background color.
--calcite-menu-item-sub-menu-border-color	Specifies the submenu's border color.
--calcite-menu-item-sub-menu-corner-radius	Specifies the submenu's border radius.
--calcite-menu-text-color	Specifies the component's text color.

Events

Name	Description	Behavior
calciteMenuItemSelect	Emits when the component is selected.	bubblescomposedcancelable

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`