Menu Item

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

PropertyAttributeDescriptionTypeDefault
activeactiveWhen true, the component is highlighted.booleanfalse
breadcrumbbreadcrumbWhen true, the component displays a breadcrumb trail for use as a navigational aid.booleanfalse
hrefhrefSpecifies the URL destination of the component, which can be set as an absolute or relative path.string
iconEndicon-endSpecifies an icon to display at the end of the component.string
iconFlipRtlicon-flip-rtlDisplays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl")."both" | "end" | "start"
iconStarticon-startSpecifies an icon to display at the start of the component.string
labelrequiredlabelAccessible name for the component.string
messageOverridesUse this property to override individual strings used by the component.{ submenu?: string; open?: string; }
openopenWhen true, the component will display any slotted calcite-menu-item in an open overflow menu.booleanfalse
relrelDefines the relationship between the href value and the current document.string
targettargetSpecifies where to open the linked document defined in the href property.string
texttextSpecifies the text to display.string

Slots

NameDescription
submenu-itemA slot for adding calcite-menu-items in a submenu.

Styles

NameDescription
--calcite-menu-item-accent-colorSpecifies the border color of the component when active.
--calcite-menu-background-colorSpecifies the background color of the component.
--calcite-menu-item-sub-menu-border-colorSpecifies the border color of sub-menu.
--calcite-menu-item-sub-menu-corner-radiusSpecifies the border radius of sub-menu.
--calcite-menu-text-colorSpecifies the text color of the component.

Events

NameDescriptionBehavior
calciteMenuItemSelectEmits when the component is selected.bubblescomposedcancelable

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close