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 | |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | |
| label | label | Accessible name for the component. | string | |
| messageOverrides | Use this property to override individual strings used by the component. | {
submenu?: string;
open?: string;
} | ||
| 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 | |
| target | target | Specifies where to open the linked document defined in the href property. | string | |
| text | text | Specifies the text to display. | string |
Slots
| Name | Description |
|---|---|
| submenu-item | A slot for adding calcite-menu-items in a submenu. |
Styles
| Name | Description |
|---|---|
| --calcite-menu-item-accent-color | Specifies the border color of the component when active. |
| --calcite-menu-background-color | Specifies the background color of the component. |
| --calcite-menu-item-sub-menu-border-color | Specifies the border color of sub-menu. |
| --calcite-menu-item-sub-menu-corner-radius | Specifies the border radius of sub-menu. |
| --calcite-menu-text-color | Specifies the text color of the component. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteMenuItemSelect | Emits when the component is selected. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| setFocus | Sets focus on the component. | setFocus(): Promise<void> |